首先安裝echarts? npm install echarts --save? ? ?以下參數(shù)直接去echarts官網(wǎng)查詢就可以了，很簡單拔鹰，但是找某個(gè)參數(shù)的過程很艱辛绸罗。
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱狀圖組件(用什么形狀的圖就引哪個(gè))
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: '訂單完成數(shù)統(tǒng)計(jì)',
????????????},
????????????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);
}
}
}
}
