VUE中简单使用ECharts笔记

1.安装

npm install echarts --save

2.在vue中创建盒子，设置id属性

<div id="myChart"></div>

3.style中设置宽高

<style>
  #myChart {
    width: 400px;
    height: 400px;
    background-color: #1890ff;
  }
</style>

4.script中配置

首页引入echarts

import * as echarts from 'echarts';

然后在methods中定义方法

// 4.1初始化echarts实例，获取dom
let myChart = echarts.init(document.getElementById('myChart'));

// 4.2绘制图表
var option = {
  // 标题
  title: {},
  // 图例
  legend: {},
  // 图形
  series: {},
  // 大小
  grid: {},
  // x轴
  xAxis: {},
  // y轴
  yAxis: {}.
  // 提示框
  tooltip: {},
  ...
};

// 4.3setOption
option && myChart.setOption(option);

最后在mounted中挂载该方法

mounted () {
  this.定义的方法
}