在vue 中使用百度echarts
2020-05-27 本文已影响0人
伟笑_552f
前言：在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: ["中原区", "二七区", "金水区", "上街区", "中牟县", "经开区","高新区"]
},
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: ["中原区", "二七区", "金水区", "上街区", "中牟县", "经开区","高新区"]
},
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+ 开发，依赖 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/>{b} : {c} ({d}%)"
},
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: "{b} \n {c}({d}%)"
},
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
