npm 安装 ECharts
在 3.1.1
版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1
开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
如果能够执行 cnpm
cnpm install echarts --save
在页面放置容器
<div id="myChart" style="width: 1200px;height: 500px;margin-top: 30px"></div>
methods加上方法
drawLine() {
var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
xAxis: {
type: 'category',
name: '日期',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name: '金额',
type: 'value'
},
legend: {
data:['收入','支出']
},
series: [{
name:'收入',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
name:'支出',
data: [80, 92, 91, 34, 190, 130, 120],
type: 'line'
}
]
});
},
初始化页面时候执行方法
mounted() {
this.drawLine();
}
官网地址:https://www.echartsjs.com/
官网有详细文档
我用的是webpack选的第三个;----------------------------------