How to use Echarts in VUE

The installation

npm npm install echarts-vue-component

yarn yarn add echarts-vue-component

Introduce Echarts in main.js

// Create the Echarts component
import ChartBlock from 'echarts-vue-component'
Vue.use(ChartBlock)
Copy the code

Introduce it in the page

//script
import ChartBlock from 'echarts-vue-component'  / / introduction
export default {
  components: {ChartBlock},      /// Instance component},data() {
   return {
      option: {          // Render value
        tooltip: {
          trigger: "axis",},legend: {
          data: ["actualData"."expectedData"],},grid: {
          left: "3%".right: "4%".bottom: "3%".containLabel: true,},toolbox: {
          feature: {
            saveAsImage: {},}},xAxis: {
          type: "category".boundaryGap: false.data: ["Mon"."Tue"."Wed"."Thu"."Fri"."Sat"."Sun"],},yAxis: {
          type: "value",},series: [{name: "actualData".type: "line".stack: "Total".data: [100.150.200.240.160],}, {name: "expectedData".type: "line".stack: "Total".data: [130.140.190.220.170],}],},}; },mounted() {
    this.$refs.chart.setOption(this.option);  // For example
  },
Copy the code

// Page content
<template>
  <div>
    <chart-block style="width: 600px; height: 200px" ref="chart"></chart-block>
  </div>
</template>
Copy the code

When we want to change the value in Echarts

// Define the method
   echartsFn() {
       this.option.series[0].data = [100.200.250.210.150];  / / value
       this.$refs.chart.setOption(this.option);  // re-instantiate
    },
Copy the code

Data in option.series must be arrays

[120, 82, 91, 154, 162, 140, 130, __ob__: Observer]

Parse (json.stringify (the array)) can be used to make an array