首先安装echarts npm install echarts --save 以下参数直接去echarts官网查询就可以了,很简单,但是找某个参数的过程很艰辛。
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件(用什么形状的图就引哪个)
require('echarts/lib/chart/line');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
mounted() {
this.drawLine();//画出折线图
},
methods:{
drawLine() {
let myChart = echarts.init(document.getElementById('myChart'));
let option = null;
myChart.setOption({
title: {
text: '订单完成数统计',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['成交']
},
toolbox: {
show: true,
feature: {
magicType: {
show: true,
type: ['stack', 'tiled']
},
saveAsImage: {
show: true
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel:{
interval:0
},
data: ['10-24', '10-27', '10-30', '11-02', '11-05', '11-08', '11-11', '11-14', '11-17', '11-20']
},
yAxis: {
type: 'value',
},
series: [
{
name: '成交',
type: 'line',
smooth: true,
lineStyle:{
normal:{
color:'#1588BB'
}
},
itemStyle:{
normal:{
color:'deepskyblue'
}
},
data: [10, 20, 30, 60, 88, 100,24, 54, 46, 18]
},
]
})
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
}
}