前言：在vue2.0中使用百度echarts有三種解決方案。
一、原始方法直接使用
這樣每次都要獲取圖表dom元素 然后通過setOption渲染數據，最后在mounted中初始化。很麻煩。
<template>
<div>
<div id="typeChart" style="width: 600px;height:400px;"></div>
<div id="brandChart" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
methods: {
typeChart() {
// 基于準備好的dom，初始化echarts實例
let typeChart = echarts.init(document.getElementById("typeChart"));
// 指定圖表的配置項和數據
let option = {
color: ["red"],
title: {
text: "類型統計"
},
tooltip: {},
legend: {
data: ["檢測車輛"]
},
xAxis: {
data: ["中原區(qū)", "二七區(qū)", "金水區(qū)", "上街區(qū)", "中牟縣", "經開區(qū)","高新區(qū)"]
},
yAxis: {},
series: [
{
name: "檢測車輛",
type: "bar",
barWidth: 20,
data: [50, 100, 200, 300, 400, 500, 600],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#67B6FF" }, //柱圖漸變色
{ offset: 0.5, color: "#44C0C1" }, //柱圖漸變色
{ offset: 1, color: "#06B5D7" } //柱圖漸變色
])
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
typeChart.setOption(option);
},
brandChart() {
// 基于準備好的dom，初始化echarts實例
let brandChart = echarts.init(document.getElementById("brandChart"));
// 指定圖表的配置項和數據
let option = {
color: ["red"],
title: {
text: "品牌信息"
},
tooltip: {},
legend: {
data: ["檢測車輛"]
},
xAxis: {
data: ["中原區(qū)", "二七區(qū)", "金水區(qū)", "上街區(qū)", "中牟縣", "經開區(qū)","高新區(qū)"]
},
yAxis: {},
series: [
{
name: "檢測車輛",
type: "bar",
barWidth: 20,
data: [50, 140, 200, 300, 400, 500, 400],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#67B6FF" }, //柱圖漸變色
{ offset: 0.5, color: "#44C0C1" }, //柱圖漸變色
{ offset: 1, color: "#06B5D7" } //柱圖漸變色
])
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
brandChart.setOption(option);
}
},
mounted() {
this.typeChart();
this.brandChart();
}
};
</script>
二、使用vue-echarts
vue-echarts是ECharts 的 Vue.js 組件，基于 ECharts v4.1.0+ 開發(fā)，依賴 Vue.js v2.2.6+，意思就是可以直接把echarts實例當中vue中的組件來使用，不用每次都獲取dom、掛在dom，輕松使用echarts的所用功能。。。
npm（安裝）
$ npm install echarts vue-echart
main.js中引入
import ECharts from 'vue-echarts'
// 注冊全局的組件
Vue.component('vChart', ECharts)
使用
<template>
<div class="page">
<el-card>
<!-- 柱狀圖+折線圖 -->
<vChart class="chart3" :options="barOptions" />
<!-- 餅狀圖 -->
<el-row class="chart4" type="flex" justify="space-between">
<el-col :span="8" class="chart">
<vChart class="chart4_1" :options="piesOptions" />
</el-col>
<el-col :span="8" class="chart">
<vChart class="chart4_1" :options="piesOptions" />
</el-col>
<el-col :span="8" class="chart">
<vChart class="chart4_1" :options="piesOptions" />
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
barOptions: {
color: ["#5094FF", "#64DAAC", "#FAC84A"],
grid: {
top: "15%",
bottom: "20%",
right: "5%",
left: "5%"
},
tooltip: {},
legend: {
data: ["合格數", "超標數", "合格率", "超標率"],
top: "0"
},
xAxis: {
type: "category",
data: ["04-13", "04-14", "04-15", "04-16", "04-17", "04-18", "04-19"]
},
yAxis: {
// name: '合格率(%)',
// nameLocation: 'middle',
type: "value"
// nameTextStyle: {
// fontSize: '0.072917rem',
// color: '#999999'
// }
},
series: [
{
name: "合格數",
type: "bar",
barWidth: "15%",
barGap: "5%",
data: [20, 232, 441, 654, 770, 530, 410]
},
{
name: "超標數",
type: "bar",
barWidth: "15%",
data: [120, 482, 791, 834, 590, 930, 710]
},
{
name: "合格率",
type: "line",
data: [420, 332, 291, 654, 590, 330, 810]
},
{
name: "超標率",
type: "line",
data: [120, 232, 391, 854, 590, 730, 410]
}
]
},
piesOptions: {
color: ["#5094FF", "#64DAAC", "#FAC84A"],
title: {
text: "汽油柴油分布",
top: "5%",
left: "5%",
textStyle: {
fontSize: "0.072917rem",
color: "#333333",
fontStyle: "normal"
}
},
grid: {
top: "15%",
bottom: "15%",
right: "15%",
left: "15%"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/> : {c} (u0z1t8os%)"
},
series: [
{
name: "氣體值",
type: "pie",
radius: "80%",
center: ["50%", "50%"],
data: [
{ value: 50, name: "NOx超標" },
{ value: 30, name: "PM2.5超標" },
{ value: 20, name: "超標污染物" }
],
label: {
position: "inside",
formatter: " \n {c}(u0z1t8os%)"
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
}
};
</script>
三、使用v-charts
v-charts 是基于vue2二次封裝的圖表組件庫，功能沒有echarts多 但也夠用了，官網很詳細，這里用一個官網例子說明問題。
<template>
<ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
</template>
<script>
export default {
data () {
this.chartSettings = {
showLine: ['下單用戶']
}
return {
chartData: {
columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
rows: [
{ '日期': '1/1', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
{ '日期': '1/2', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
{ '日期': '1/3', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
{ '日期': '1/4', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
{ '日期': '1/5', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
{ '日期': '1/6', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
]
}
}
}
}
</script>
以上，可跟據需求選用，如果需求簡單可直接用v-charts
