使用vue+echarts绘制图表

五步绘制echarts图表

目录

五步绘制echarts图表

第一步：main.js中添加如下代码

第二步：template中添加如下代码

第三步：methods中写一个绘制折线图的函数

第四步：mounted中调用函数

第五步：css中添加如下代码

注意事项：

---

第一步：main.js中添加如下代码

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

绘制echarts图的vue文件中：

第二步：template中添加如下代码

<!--添加一个div用于放echarts图，一定给这个div一个id ->
<div id="lineChart"></div> 

第三步：methods中写一个绘制折线图的函数

drawLineChart(id){
this.$echarts.init(document.getElementById(id)).dispose(); //初始化echarts之前先手动销毁之前的echarts图，防止显示错乱
let lineChart = this.$echarts.init(document.getElementById(id)); //初始化echarts
// 添加配置项
lineChart.setOption(
{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
); 
}

第四步：mounted中调用函数

mounted(){
    this.drawLineChart('lineChart')
}

第五步：css中添加如下代码

<style scoped>
    .lineChart{
        width:800px;
        height:800px
}
</style>

注意事项：

①在mounted中初始化图表

②设置图表宽度和高度

③先销毁后初始化图表，防止点击过快导致的图像错位

④element-resize-detector 组件可以监听窗口大小，当屏幕全屏、半屏或者拖拉导致浏览器窗口变小时，重新绘制echarts图

⑤防止页面抖动，在tooltip设置transitionDuration:0