总结: vue中使用echart,引入js.
var echarts = require(’…/…/…/…/static/js/echarts-4.2.0.js’)
methods中封装好方法。
钩子函数中调用。
<script>
var echarts = require('../../../../static/js/echarts-4.2.0.js')
methods: {
// 公路统计echarts图表
setBarEcharts: function () {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('barEcharts'));
// 指定图表的配置项和数据
var option = {
tooltip: {},
legend: {
right: 20,
data: ['未抢通', '已抢通', '未审核']
},
xAxis: {
data: ["杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市"],
axisLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: "#f6f6f6"
}
}
},
series: [
{
name: '未抢通',
stack: 'bar1',
type: 'bar',
barWidth: '40%',
data: [5, 20, 36, 10, 10, 20, 20, 20]
},
{
name: '已抢通',
stack: 'bar1',
type: 'bar',
barWidth: '40%',
data: [5, 20, 36, 10, 10, 20, 20, 20]
},
{
name: '未审核',
stack: 'bar1',
type: 'bar',
barWidth: '40%',
itemStyle: {
barBorderRadius: [4, 4, 0, 0]
},
data: [5, 20, 36, 10, 10, 20, 20, 20]
}
],
color: ['#9788ef', '#25c8b3', '#3599f3']
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},