這是一個完整的基于vue2組件的echarts案例:
第一步安裝:
npm install echarts --save
第二步:新建TestChart.vue文件，并將以下代碼復(fù)制到新建的文件中
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: String,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
// 在組建再次渲染時盏浙，調(diào)用 this.initChart()初始化echarts圖表
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()//在組件銷毀的時候废膘，調(diào)用chart.dispose()銷毀圖表實例
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)//調(diào)用echarts.init()方法初始化圖表
this.setOptions(this.chartData)
/*
設(shè)置圖表實例的配置項以及數(shù)據(jù)慕蔚，萬能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過 setOption 完成灌闺，
ECharts 會合并新的參數(shù)和數(shù)據(jù)坏瞄，然后刷新圖表。
如果開啟動畫的話鸠匀，ECharts 找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。
*/
},
setOptions({ totalData, normalData, manMachineSeparationData, notMyselfData, titleLine } = {}) {
var dataArr = 60;//現(xiàn)實的百分比數(shù)據(jù)
var data=0;
this.chart.setOption({
backgroundColor: "#FFFFFF",//背景色宅此，默認(rèn)無背景爬范。
title: {//標(biāo)題組件，包含主標(biāo)題和副標(biāo)題侣诵。
show: true,
text: '任務(wù)進(jìn)度',//主標(biāo)題
x: '50%',//直角坐標(biāo)系 grid 中的 x 軸狱窘，
y: '57%',//直角坐標(biāo)系 grid 中的 y 軸
z: 8,//直角坐標(biāo)系 grid 中的 z軸
textAlign: 'center',//文字的對齊方式
textStyle: {//文字的樣式
color: '#f1f7fe',
fontSize: 20,
fontWeight: 'normal'
},
},
series: [//控制圖表是那種樣式,比如柱狀圖或者餅圖
// 最小的時鐘的樣式
{
name: "內(nèi)部（環(huán)形）進(jìn)度條",
type: "gauge",//儀表盤
// center: ['20%', '50%'],
radius: '60%',
splitNumber: 10,//分裂數(shù)
axisLine: {//周線的相關(guān)設(shè)置
lineStyle: {
color: [
[dataArr / 100, '#458EFD'],//dataArr / 100處的顏色
[1, "#FFFFFF"]//100% 處的顏色
],
width: 14//線的寬度
}
},
axisLabel: {
show: false,//是否顯示刻度標(biāo)簽蘸炸。
},
axisTick: {
show: false,//是否顯示坐標(biāo)軸刻度尖奔。
},
splitLine: {
show: false,//是否顯示分隔線穷当。默認(rèn)數(shù)值軸顯示馁菜，類目軸不顯示铃岔。(在該案例中表示是否顯示時鐘的刻度線)
},
pointer: {
show: false,//是否顯示指針。
},
},
{
name: '外部刻度',
type: 'gauge',
// center: ['20%', '50%'],
radius: '70%',
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度數(shù)量
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
// 儀表盤刻度線
lineStyle: {
width: 2,
color: [
[1, '#FFFFFF']
]
}
},
//儀表盤文字
axisLabel: {
show: true,
color: '#868FDF',
distance: 25,
formatter: function(v) {//用來格式化圖例文本智嚷，支持字符串模板和回調(diào)函數(shù)兩種形式纺且。
switch (v + '') {
case '0':
return '0';
case '10':
return '10';
case '20':
return '20';
case '30':
return '30';
case '40':
return '40';
case '50':
return '50';
case '60':
return '60';
case '70':
return '70';
case '80':
return '80';
case '90':
return '90';
case '100':
return '100';
}
}
}, //刻度標(biāo)簽载碌。
axisTick: {
show: true,
splitNumber: 7,
lineStyle: {
color: '#3082FE', //用顏色漸變函數(shù)不起作用
width: 2,
},
length: -8
}, //刻度樣式
splitLine: {
show: true,
length: -20,
lineStyle: {
color: '#458EFD', //用顏色漸變函數(shù)不起作用
}
}, //分隔線樣式
detail: {
show: false
},
pointer: {
show: false
}
},
/*內(nèi)部*/
{
type: 'pie',
radius: ['0', '40%'],
center: ['50%', '50%'],
z: 8,
hoverAnimation: false,
data: [{
name: '檢查進(jìn)度',
value: dataArr,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3398ff'
}, {
offset: 1,
color: '#7db0fd'
}])
}
},
label: {
normal: {
formatter: function(params) {
return params.value + '%';
},
color: '#FFFFFF',
fontSize: 54,
fontWeight: "bold",
position: 'center',
show: true
}
},
labelLine: {
show: false
}
}],
},
/*外一層*/
{
type: "pie",
radius: "45%",
startAngle: 220,
endAngle: -40,
hoverAnimation: false,
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: 1,
itemStyle: {
normal: {
color: '#8DC4FD'
}
}
}],
},
//外二層圈
{
type: "pie",
radius: "50%",
center: ["50%", "50%"],
avoidLabelOverlap: false,
z: 0,
hoverAnimation: false,
label: {
show: false
},
labelLine: {
show: false
},
data: [{
"value": 1,
itemStyle: {
normal: {
color: '#e3edf8'
}
}
}]
}
]
}, true)
}
}
}
</script>
第三步使用:
在別的文件中引入新建的文件朗伶，并在conmponents中進(jìn)行注冊，然后在template中使用
//第一步引入
import TestChart from './charts/TestChart.vue'
//第二步進(jìn)行注冊
components: {
TestChart
}
//第三步在template中使用并傳入需要的數(shù)據(jù)
<test-chart :chartData='chartData' width='300px' height='300px'></test-chart>
至此一個儀表盤就被我們成功的畫出來了腕让，效果圖如下:
儀表盤.png
