vue echarts绘制各种统计图(一)
1.npm 安装 ECharts你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save2.在div中插入ecahrts3.在methods中引入echarts模块,并初始化4.绘制统计图(以折线图为例),类似的统计图可参考https://www.echartsjs.com/examples/zh/index.ht...
·
1.npm 安装 ECharts
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
2.在div中插入ecahrts
3.在methods中引入echarts模块,并初始化
4. 绘制统计图(以折线图为例),类似的统计图可参考https://www.echartsjs.com/examples/zh/index.html
drawLineChart() {
const echarts = require('echarts');
let myChart = echarts.init(document.getElementById('chartLine'));
myChart.setOption(
{
title: {
text: '销量趋势图',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销量'],
x: 'right'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['A','B','C','D','E','F','G']
},
yAxis: {
type: 'value'
},
series:
[{
name: '销量',
type: 'line',
// 设置折线图颜色
itemStyle: {
normal: {
lineStyle: {
color: '#4876FF'
}
}
},
stack: '总量',
data: [1,2,3,4,5,6,7]
}]
}
);
}
5.最最最重要的一步!!!
一定要在mounted中执行绘制统计图方法!
一定要在mounted中执行绘制统计图方法!
一定要在mounted中执行绘制统计图方法!
更多推荐
已为社区贡献4条内容
所有评论(0)