The introduction of echarts

Method 1: In the absence of a Webapck/parcel, CDN import directly imports tags in HTML

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>

Copy the code

Then use the global variable window.echarts

Method 2: Command line to download Echarts if there is a Webpack /parcel

yarn add echarts
yarn add --dev @types/echarts  // Run in TypeScript
import echarts from 'echarts'or`var echarts = require('echarts')`
Copy the code

Then use Echarts

Using echarts

  1. To prepareDOMContainer, i.e.,echartsMounted containers
<body> <! -- Prepare a DOM with size (width and height) for ECharts<div id="main" style="width: 600px; height:400px;"></div>
</body>
Copy the code
  1. addechartscode
<! DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <! Echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <! -- Prepare a Dom with size (width and height) for ECharts
    <div id="main" style="width: 600px; height:400px;"></div>
    <script type="text/javascript">
        // Initializes the echarts instance based on the prepared DOM
        var myChart = echarts.init(document.getElementById('main'));

        // Specify the chart configuration items and data
        var option = {
            title: {
                text: 'Getting started with ECharts'
            },
            tooltip: {},
            legend: {
                data: ['sales']},xAxis: {
                data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
            series: [{
                name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}};// Display the chart using the configuration items and data you just specified.
        myChart.setOption(option);
    </script>
</body>
</html>

Copy the code
  1. rendering

Update the theme

Method 1: the echarts.init() method

const main = document.getElementById('main')
const myChart = eacharts.init(main, 'dark') // The second parameter can be set to light or default

Copy the code

Method 2: Detail modification

myChart.setOption({
    series: [{// Change the fill color of the line
        lienStyle: {color:blue
        },
    // Modify the fill point broadband
       itemStyle: {borderWidth:10  
       },
        name:'bug数'.data: [820.935.901.934.1290.1330.1320].type:'line'}]})Copy the code

Update echarts data

Update X-axis data using setOption

  • useshowLoading() / hideLoading()
  • echartsDifferences are automatically found and the chart is updated
// html
<button id="loadMore"</button>// js
const loadMoreButton = document.getElementById('loadmore')
/ / echarts parts
loadMoreButton.addEventListener('click'.() = >{
    const newKey = '2020-01-27'
    const newValue = 10
    myChart.setOption({
        xAxis: {data:[...prviousData, newKey] // Merge old and new data to generate new data
        },
        series: [{data:[...value, newValue]  // Integrate old and new data generation}]})})Copy the code

Load the data

Use showLoading() to display the animation loaded with data, showLoading() to close the loaded animation

let isLoading = false
loadMoreButton.addEventListener('click'.() = >{
   if(isLoading === true) {return}
    myChart.showLoading()
    isLoading = true
    setTimeout(() = >{
        const newKey = '2020-01-27'
        const newValue = 10
        myChart.setOption({
            xAxis: {data:[...prviousData, newKey] // Merge old and new data to generate new data
            },
            series: [{data:[...value, newValue]  // Integrate old and new data generation
            }]
        })
        myChart.showLoading()
        isLoading= false
    }, 3000)})Copy the code

Click on the event

Use on to listen for events

myChart.on('click'.(e) = >{
    window.alert(`${e.name}`Was clicked)})Copy the code

Mobile adaptation

Copy the meta into the HTML of the project

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

Copy the code

Use JS to get the screen width set on the div and design the width to height ratio

const width = document.documentElement.clientWidth
main.style.width = `${width}px`
main.style.height = `${width*1.2}px`

Copy the code

Suitable for both mobile and PC terminals, using baseOption and media

myChart.setOption({
    baseOption: {// Custom part on PC
    },
    meidia:[
    {
         // Mobile custom part
        query: {maxWidth:500 
        },
        option: {series: [{// omit the code}}]// omit the code}]})Copy the code

Echarts adapter Vue

Encapsulate Echarts as a component

// Subcomponent vue-echarts
<template>
    <div ref="container">
    
    </div>
</template>

<script>
import echart from 'echarts'
export default {
    props: ['option'.'loading']
    mounted(){
        const width = document.documentElement.clientWidth
        this.$refs.container.style.width = `${width}px`
        this.$refs.container.style.height = `${width * 1.2}px`
        this.chart = echarts.init(this.$refs.container,'dark')
        this.chart.setOption(this.option)
    },
    watch: {option(){
            this.chart.setOption(this.option)
        },
        loading(){
            if(loading){
                this.chart.showLoading()
            }else{
                this.chart.hideLoading()
            }
        }
    }
}
</script>

// Parent component, which contains echarts children
<template>
  <div>
      <h1>Echarts is used in VUE</h1>
      <vue-echarts :option="option" :loading="loading"></vue-echarts>
      <button @click="loadMore">To load more</button>
  </div>
</template>

<script>
  import VueEcharts from './vue-echarts.vue'
  export default {
      mounted(){
        return {
            loading: false.option: {
                title: {
                    text: 'Getting started with ECharts'
                },
                tooltip: {},
                legend: {
                    data: ['sales']},xAxis: {
                    data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
                series: [{
                    name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]}]}}},component:{VueEcharts},
    methods: {loadMore(){
            this.loading = true
            setTimeout( () = >{
            this.loading = false
            this.option = this.setOption({
                xAxis: {data:[...prviousData, newKey] // Merge old and new data to generate new data
                },
                series: [{data:[...value, newValue]  // Integrate old and new data generation}]})},3000)}}}</script>
Copy the code