五步绘制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