1、安装echarts模块
npm install echarts --save
2、新建vue文件， 示例程序主体来自echarts官网：https://echarts.apache.org/examples/zh/index.html#chart-type-line
<template>
<div id="app">
<!--为echarts准备一个具备大小的容器dom-->
<div id="main"></div>
</div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
name: '',
data() {
return {
charts: '',
opinionData: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2014-06-17', 104], ['2014-06-18', 116], ['2014-06-19', 116], ['2014-06-20', 84], ['2014-06-21', 96], ['2014-06-22', 91], ['2014-06-23', 115], ['2014-06-24', 161], ['2014-06-25', 138], ['2014-06-26', 163], ['2014-06-27', 68], ['2014-06-28', 77], ['2014-06-29', 161], ['2014-06-30', 185], ['2014-07-01', 172], ['2014-07-02', 80], ['2014-07-03', 248], ['2014-07-04', 237], ['2014-07-05', 165], ['2014-07-06', 256], ['2014-07-07', 216], ['2014-07-08', 134], ['2014-07-09', 63], ['2014-07-10', 114], ['2014-07-11', 77], ['2014-07-12', 80], ['2014-07-13', 64], ['2014-07-14', 156], ['2014-07-15', 140], ['2014-07-16', 133], ['2014-07-17', 186], ['2014-07-18', 182], ['2014-07-19', 106], ['2014-07-20', 119], ['2014-07-21', 68], ['2014-07-22', 54], ['2014-07-23', 82], ['2014-07-24', 90], ['2014-07-25', 134], ['2014-07-26', 188], ['2014-07-27', 194], ['2014-07-28', 159], ['2014-07-29', 159], ['2014-07-30', 169], ['2014-07-31', 244], ['2014-08-01', 199], ['2014-08-02', 163], ['2014-08-03', 149], ['2014-08-05', 80], ['2014-08-06', 67], ['2014-08-07', 162], ['2014-08-08', 140], ['2014-08-09', 143], ['2014-08-10', 125], ['2014-08-11', 76], ['2014-08-12', 119], ['2014-08-13', 70], ['2014-08-14', 104], ['2014-08-15', 109], ['2014-08-16', 159], ['2014-08-17', 124], ['2014-08-18', 135], ['2014-08-19', 150], ['2014-08-20', 164], ['2014-08-21', 169], ['2014-08-22', 83], ['2014-08-23', 155], ['2014-08-24', 75], ['2014-08-25', 59], ['2014-08-26', 78], ['2014-08-27', 136], ['2014-08-28', 103], ['2014-08-29', 104], ['2014-08-30', 176], ['2014-08-31', 89], ['2014-09-01', 127], ['2014-09-03', 54], ['2014-09-04', 100], ['2014-09-05', 140], ['2014-09-06', 186], ['2014-09-07', 200], ['2014-09-08', 61], ['2014-09-09', 109], ['2014-09-10', 111], ['2014-09-11', 114], ['2014-09-12', 97], ['2014-09-13', 94], ['2014-09-14', 66], ['2014-09-15', 54], ['2014-09-16', 87], ['2014-09-17', 80], ['2014-09-18', 84], ['2014-09-19', 117], ['2014-09-20', 168], ['2014-09-21', 129], ['2014-09-22', 127], ['2014-09-23', 64], ['2014-09-24', 60], ['2014-09-25', 144], ['2014-09-26', 170], ['2014-09-27', 58], ['2014-09-28', 87], ['2014-09-29', 70], ['2014-09-30', 53], ['2014-10-01', 92], ['2014-10-02', 78], ['2014-10-03', 123], ['2014-10-04', 95], ['2014-10-05', 54], ['2014-10-06', 68], ['2014-10-07', 200], ['2014-10-08', 314], ['2014-10-09', 379], ['2014-10-10', 346], ['2014-10-11', 233], ['2014-10-14', 80], ['2014-10-15', 73], ['2014-10-16', 76], ['2014-10-17', 132], ['2014-10-18', 211], ['2014-10-19', 289], ['2014-10-20', 250], ['2014-10-21', 82], ['2014-10-22', 99], ['2014-10-23', 163], ['2014-10-24', 267], ['2014-10-25', 353], ['2014-10-26', 78], ['2014-10-27', 72], ['2014-10-28', 88], ['2014-10-29', 140], ['2014-10-30', 206], ['2014-10-31', 204], ['2014-11-01', 65], ['2014-11-03', 59], ['2014-11-04', 150], ['2014-11-05', 79], ['2014-11-07', 63], ['2014-11-08', 93], ['2014-11-09', 80], ['2014-11-10', 95], ['2014-11-11', 59], ['2014-11-13', 65], ['2014-11-14', 77], ['2014-11-15', 143], ['2014-11-16', 98], ['2014-11-17', 64], ['2014-11-18', 93], ['2014-11-19', 282], ['2014-11-23', 155], ['2014-11-24', 94], ['2014-11-25', 196], ['2014-11-26', 293], ['2014-11-27', 83], ['2014-11-28', 114], ['2014-11-29', 276], ['2014-12-01', 54], ['2014-12-02', 65], ['2014-12-03', 51], ['2014-12-05', 62], ['2014-12-06', 89], ['2014-12-07', 65], ['2014-12-08', 82], ['2014-12-09', 276], ['2014-12-10', 153], ['2014-12-11', 52], ['2014-12-13', 69], ['2014-12-14', 113], ['2014-12-15', 82], ['2014-12-17', 99], ['2014-12-19', 53], ['2014-12-22', 103], ['2014-12-23', 100], ['2014-12-25', 73], ['2014-12-26', 155], ['2014-12-27', 243], ['2014-12-28', 155], ['2014-12-29', 125], ['2014-12-30', 65], ['2015-01-01', 65], ['2015-01-02', 79], ['2015-01-03', 200], ['2015-01-04', 226], ['2015-01-05', 122], ['2015-01-06', 60], ['2015-01-07', 85], ['2015-01-08', 190], ['2015-01-09', 105], ['2015-01-10', 208], ['2015-01-11', 59], ['2015-01-12', 160], ['2015-01-13', 211], ['2015-01-14', 265], ['2015-01-15', 386], ['2015-01-16', 118], ['2015-01-17', 89], ['2015-01-18', 94], ['2015-01-19', 77], ['2015-01-20', 113], ['2015-01-22', 143], ['2015-01-23', 257], ['2015-01-24', 117], ['2015-01-25', 185], ['2015-01-26', 119], ['2015-01-28', 65], ['2015-01-29', 87], ['2015-01-31', 60], ['2015-02-01', 108], ['2015-02-02', 188], ['2015-02-03', 143], ['2015-02-05', 62], ['2015-02-06', 100], ['2015-02-09', 152], ['2015-02-10', 166], ['2015-02-11', 55], ['2015-02-12', 59], ['2015-02-13', 175], ['2015-02-14', 293], ['2015-02-15', 326], ['2015-02-16', 153], ['2015-02-18', 73], ['2015-02-19', 267], ['2015-02-20', 183], ['2015-02-21', 394], ['2015-02-22', 158], ['2015-02-23', 86], ['2015-02-24', 207]]
}
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
title: {
text: 'Beijing AQI',
left: '1%'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '5%',
right: '15%',
bottom: '10%'
},
xAxis: {
data: this.opinionData.map(function (item) {
return item[0]
})
},
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [
{
startValue: '2014-06-01'
},
{
type: 'inside'
}
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0,
lte: 50,
color: '#93CE07'
},
{
gt: 50,
lte: 100,
color: '#FBDB0F'
},
{
gt: 100,
lte: 150,
color: '#FC7D02'
},
{
gt: 150,
lte: 200,
color: '#FD0100'
},
{
gt: 200,
lte: 300,
color: '#AA069F'
},
{
gt: 300,
color: '#AC3B2A'
}
],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: this.opinionData.map(function (item) {
return item[1]
}),
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [
{
yAxis: 50
},
{
yAxis: 100
},
{
yAxis: 150
},
{
yAxis: 200
},
{
yAxis: 300
}
]
}
}
})
}
},
// 调用
mounted() {
this.$nextTick(function () {
this.drawLine('main')
})
}
}
</script>
<style scoped>
</style>
3、启动
npm run serve
4、效果图
