vue实现echarts中的仪表盘
最终结果
一:安装
1. 首先需要安装echarts依赖包
npm install echarts -S
2. 或者使用国内的淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
二: 创建图表
全局引入
main.js
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
Hello.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default {
data(){
return {
}
},
mounted(){
this.myChart() //函数调用
},
methods:{
myChart() {
let columnar = this.$echarts.init(document.getElementById('myChart'));
columnar.setOption({
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show: true,
feature: {
restore: {
show: true},
saveAsImage: {
show: true}
}
},
series : [
{
name: '空气质量:',
type: 'gauge',
z: 3,
min: 0,
max: 500,
splitNumber: 10,
radius: '60%',
axisLine: