文章目錄
- 一、安裝Echarts
- 二、在main.js引入，以便于全局使用
- 三、繪制圖表
-
- 柱狀圖
- 折線圖
- 環形圖、餅圖
- 箱線柱狀圖
- 中國地圖
- 儀表盤
随着大資料時代的來臨，更多的資料要求可視化操作，圖表的應用需求也不斷提高。那麼在Vue中該怎樣使用圖表呢？
一、安裝Echarts
npm install echarts -S
二、在main.js引入，以便于全局使用
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
三、繪制圖表
柱狀圖
<template>
<div>
<header>這是銷量展示頁面</header>
<div id="volume"></div>
<foottab></foottab>
</div>
</template>
<script>
//引入底部導航元件
import foottab from '../components/footTab.vue'
export default {
methods:{
drawBar(){
//基于準備好的dom，初始化echarts執行個體
let volume = this.$echarts.init(document.getElementById('volume'));
//繪制圖表
volume.setOption({
title:{text:'商品銷量'},
tooltip:{},
legend: {
data:['銷量']
},
xAxis: {
data: ['衣服','褲子','帽子','鞋子','領帶']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [40,30,20,60,10]
}]
})
}
},
mounted(){//模闆或el對應的html渲染完成後再調用裡面的方法
this.drawBar()
},
components: {
foottab
}
}
</script>
</script>
<style scoped>
#volume{
width:20em;
height:20em;
}
</style>
這樣即完成了繪制，繪制效果如下：
折線圖
line(){
//指定圖示的配置和資料
var option = {
title:{
text:'集中度風險'
},
tooltip:{},
legend:{
data:['時間']
},
xAxis:[
{
name:'時間',
type:'category',
boundaryGap: false,//從起點開始
splitLine: {//隐藏網格線
"show": false
},
axisTick:{ //隐藏刻度線
"show":false
},
data:["201808","201809","201903","201906"]
}
],
yAxis:{
name:'%',
min: 'dataMin', //取資料在該軸上的最小值作為最小刻度
splitLine: {
"show": false
},
axisTick:{ //y軸刻度線
"show":false
}
},
series:[{
name:'通路量',
type:'line',
areaStyle: {
normal: {color: '#80ffc0'}
},
data:[51,54,48,53]
}]
};
let volume5 = this.$echarts.init(document.getElementById('volume5'));
volume5.setOption(option)
}
環形圖、餅圖
pie(){
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接通路','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
},
series: [
{
name:'通路來源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接通路'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視訊廣告'},
{value:1548, name:'搜尋引擎'}
]
},
{
name:'通路來源',
type:'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:135, name:'直接通路'},
{value:210, name:'郵件營銷'},
{value:260, name:'聯盟廣告'},
{value:100, name:'視訊廣告'},
{value:248, name:'搜尋引擎'}
]
}
]
}
var volume6 = this.$echarts.init(document.getElementById('volume6'));
volume6.setOption(option)
}
箱線柱狀圖
let volume1 = this.$echarts.init(document.getElementById('volume1'));
volume1.setOption({
backgroundColor:'#0d2a43',
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标軸訓示器，坐标軸觸發有效
type : 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},
/*
legend: { //最上方顯示
data:['中華人壽', '中華财險'],
color:'#ffffff'
},
*/
grid: {//内部距離
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value',
splitLine: {show: false}, //去掉網格線
axisTick: {//決定是否顯示坐标刻度
alignWithLabel: false,
show:false
},
axisLine:{//坐标字型顔色調整
show:false, //隐藏坐标線
lineStyle:{
color:'#ffffff',
width:2
}
}
}
],
yAxis : [
{
type : 'category',
silent: true,
splitLine: {show: false}, //去掉網格線
axisTick : {show: true},
splitLine: {show: false},
axisLine:{//坐标字型顔色調整
lineStyle:{
color:'#ffffff',
width:2
}
},
data : ['保險風險','市場風險','信用風險']
}
],
series : [
{
name:'中華人壽',
type:'bar',
barWidth: 30,
//stack: 'a',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'left',//提示文字的位置
color:'#ffffff'
}
},
data:[-16.36]
},
{
name:'中華人壽',
type:'bar',
//barGap: "-100%",//包含關系
barWidth: 30,
//stack: 'b',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'#ffffff'
}
},
data:[,-11.38]
},
{
name:'中華人壽',
type:'bar',
barWidth: 30,//設定寬度
//stack: 'c',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'#ffffff'
}
},
data:[,,-12.2]
},
{
name:'中華人壽',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否疊加
//stack: 'a',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#f9f6c7'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'black'
}
},
data:[-8]
},
{
name:'中華人壽',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否疊加
//stack: 'b',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'black'
}
},
data:[,-7.32]
},
{
name:'中華人壽',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否疊加
//stack: 'c',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'left',
color:'black'
}
},
data:[,,-8.13]
},
{
name:'中英人壽',
type:'bar',
barWidth: 30,
//stack: 'a',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'#ffffff'
}
},
data:[20]
},
{
name:'中華财險',
type:'bar',
barWidth: 30,
//stack: 'b',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'#ffffff'
}
},
data:[,14]
},
{
name:'中華财險',
type:'bar',
barWidth: 30,//設定寬度
//stack: 'c',
itemStyle:{
normal:{
color:'#ffffff'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'#ffffff'
}
},
data:[,,15]
},
{
name:'中華财險',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否疊加
//stack: 'a',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#f9f6c7'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'black'
}
},
data:[10]
},
{
name:'中華财險',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否疊加
//stack: 'b',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'black'
}
},
data:[,9]
},
{
name:'中華财險',
type:'bar',
barWidth: 30,
barGap: "-100%",//是否疊加
//stack: 'c',//決定兩個是否重疊
itemStyle:{
normal:{
color:'#c3f8ee'
}
},
label: {
normal: {
show: true,
position: 'right',
color:'black'
}
},
data:[,,10]
},
]
})
中國地圖
randomColor(){
var arr = []
for(var i = 0; i < 6; i++){
console.log(Math.round(Math.random()*this.colorArr.length))
arr.push(this.colorArr[Math.round(Math.random()*this.colorArr.length)])
}
return arr;
},
map2(){
var optionChinaMap = {
tooltip : {
trigger: 'item', //顯示懸浮視窗
formatter:function(params){
//定義一個res變量來儲存最終傳回的字元結果,并且先把地區名稱放到裡面
var res='合規處罰<br />';
//定義一個變量來儲存series資料系列
var myseries=optionChinaMap.series;
//循環周遊series資料系列
for(var i=0;i<myseries.length;i++){
//在内部繼續循環series[i],從data中判斷：當地區名稱等于params.name的時候就将目前資料和名稱添加到res中供顯示
for(var k=0;k<myseries[i].data.length;k++){
//console.log(myseries[i].data[k].name);
//如果data資料中的name和地區名稱一樣
if(myseries[i].data[k].name==params.name){
//将series資料系列每一項中的name和資料系列中目前地區的資料添加到res中
res+=myseries[i].name+':'+myseries[i].data[k].value+'<br />';
}
}
}
//傳回res
//console.log(res);
return res;
},
},
legend: {
orient: 'vertical',//圖例的排列方向
textStyle: {color:'#fff'},
x:'left',//圖例的位置
y:'20',
data:['中國地圖']
},
visualMap: {//顔色的設定 dataRange
textStyle: {color:'#000'},
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},{start: 900, end: 1500},
{start: 310, end: 1000},{start: 200, end: 300},
{start: 50, end: 200},{start: 0, end: 50},
],
color: this.randomColor()
},
// roamController: {//控制地圖的上下左右放大縮小
// show: true,
// x: 'right',
// mapTypeControl: {
// 'china': true
// }
// },
series : [
{
name: '地區',
type: 'map',
mapType: 'china',
zoom: 1.1,
layoutCenter:['50%','50%'],
roam: false,//是否開啟滑鼠縮放和平移漫遊
itemStyle:{//地圖區域的多邊形 圖形樣式
normal:{//是圖形在預設狀态下的樣式
label:{
show: true,
textStyle: {color: "rgb(249, 249, 249)"}
}
},
emphasis:{//是圖形在高亮狀态下的樣式,比如在滑鼠懸浮或者圖例關聯高亮時
label:{show:true},
}
},
top:"100",//元件距離容器的距離
data:[
{name: '北京',value: '北京' },{name: '天津',value: '天津' },
{name: '上海',value: '上海' },{name: '重慶',value: this.randomData() },
{name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },
{name: '雲南',value: this.randomData() },{name: '遼甯',value: this.randomData() },
{name: '黑龍江',value: this.randomData() },{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },{name: '山東',value: this.randomData() },
{name: '新疆',value: this.randomData() },{name: '江蘇',value: this.randomData() },
{name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },{name: '廣西',value: this.randomData() },
{name: '甘肅',value: this.randomData() },{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },{name: '陝西',value: this.randomData() },
{name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
{name: '貴州',value: this.randomData() },{name: '廣東',value: this.randomData() },
{name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },{name: '甯夏',value: this.randomData() },
{name: '海南',value: this.randomData() },{name: '台灣',value: this.randomData() },
{name: '香港',value: this.randomData() },{name: '澳門',value: this.randomData() }
]
},
{
name: '事件次數',
type: 'map',
mapType: 'china',
zoom: 1.1,
layoutCenter:['50%','50%'],
roam: false,//是否開啟滑鼠縮放和平移漫遊
showLegendSymbol : false, //去掉小點
itemStyle:{//地圖區域的多邊形 圖形樣式
normal:{//是圖形在預設狀态下的樣式
label:{
show: true,
textStyle: {color: "rgb(249, 249, 249)"}
}
},
emphasis:{//是圖形在高亮狀态下的樣式,比如在滑鼠懸浮或者圖例關聯高亮時
label:{show:true},
}
},
top:"100",//元件距離容器的距離
data:[
{name: '北京',value: '1次' },{name: '天津',value: this.randomData() },
{name: '上海',value: this.randomData() },{name: '重慶',value: this.randomData() },
{name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },
{name: '雲南',value: this.randomData() },{name: '遼甯',value: this.randomData() },
{name: '黑龍江',value: this.randomData() },{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },{name: '山東',value: this.randomData() },
{name: '新疆',value: this.randomData() },{name: '江蘇',value: this.randomData() },
{name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },{name: '廣西',value: this.randomData() },
{name: '甘肅',value: this.randomData() },{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },{name: '陝西',value: this.randomData() },
{name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
{name: '貴州',value: this.randomData() },{name: '廣東',value: this.randomData() },
{name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },{name: '甯夏',value: this.randomData() },
{name: '海南',value: this.randomData() },{name: '台灣',value: this.randomData() },
{name: '香港',value: this.randomData() },{name: '澳門',value: this.randomData() }
]
},
{
name: '處罰金額',
type: 'map',
mapType: 'china',
zoom: 1.1,
layoutCenter:['50%','50%'],
roam: false,//是否開啟滑鼠縮放和平移漫遊
showLegendSymbol : false,
itemStyle:{//地圖區域的多邊形 圖形樣式
normal:{//是圖形在預設狀态下的樣式
label:{
show: true,
textStyle: {color: "rgb(249, 249, 249)"}
}
},
emphasis:{//是圖形在高亮狀态下的樣式,比如在滑鼠懸浮或者圖例關聯高亮時
label:{show:true},
}
},
top:"100",//元件距離容器的距離
data:[
{name: '北京',value: '30萬' },{name: '天津',value: this.randomData() },
{name: '上海',value: this.randomData() },{name: '重慶',value: this.randomData() },
{name: '河北',value: this.randomData() },{name: '河南',value: this.randomData() },
{name: '雲南',value: this.randomData() },{name: '遼甯',value: this.randomData() },
{name: '黑龍江',value: this.randomData() },{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },{name: '山東',value: this.randomData() },
{name: '新疆',value: this.randomData() },{name: '江蘇',value: this.randomData() },
{name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },{name: '廣西',value: this.randomData() },
{name: '甘肅',value: this.randomData() },{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },{name: '陝西',value: this.randomData() },
{name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
{name: '貴州',value: this.randomData() },{name: '廣東',value: this.randomData() },
{name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },{name: '甯夏',value: this.randomData() },
{name: '海南',value: this.randomData() },{name: '台灣',value: this.randomData() },
{name: '香港',value: this.randomData() },{name: '澳門',value: this.randomData() }
]
}
]
};
let volume3 = this.$echarts.init(document.getElementById('volume3'));
var that = this
volume3.setOption(optionChinaMap)
/*
this.timer = setInterval(function(){
optionChinaMap.visualMap.color = that.randomColor()
volume3.setOption(optionChinaMap)
},2000)
*/
}
儀表盤
chart(){
var colorTemplate1 = [[0.2, "rgba(255,0,0,0.8)"], [0.8, "rgba(0,255,255,0.8)"], [1, "rgba(0,255,0,0.8)"]];
var data1 = [{
name: "",
value: 65
}];
// 指定圖表的配置項和資料
var option = {
backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 設定。
show: true,
trigger:'item',
formatter: "{b}：{c}%",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮層的背景顔色。注意：series.tooltip 僅在 tooltip.trigger 為 'item' 時有效。
borderColor: "#333", // 提示框浮層的邊框顔色。...
borderWidth: 0, // 提示框浮層的邊框寬。...
padding: 5, // 提示框浮層内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距。...
textStyle: { // 提示框浮層的文本樣式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "儀表盤1", // 系列名稱,用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用于指定對應的系列。
type: "gauge", // 系列類型
radius: "35%", // 參數:number, string。 儀表盤半徑,預設 75% ，可以是相對于容器高寬中較小的一項的一半的百分比，也可以是絕對的數值。
center: ["18%", "55%"], // 儀表盤位置(圓心坐标)
startAngle: 225, // 儀表盤起始角度,預設 225。圓心 正右手側為0度，正上方為90度，正左手側為180度。
endAngle: -45, // 儀表盤結束角度,預設 -45
clockwise: true, // 儀表盤刻度是否是順時針增長,預設 true。
min: 0, // 最小的資料值,預設 0 。映射到 minAngle。
max: 100, // 最大的資料值,預設 100 。映射到 maxAngle。
splitNumber: 10, // 儀表盤刻度的分割段數,預設 10。
axisLine: { // 儀表盤軸線(輪廓線)相關配置。
show: true, // 是否顯示儀表盤軸線(輪廓線),預設 true。
lineStyle: { // 儀表盤軸線樣式。
color: colorTemplate1, //儀表盤的軸線可以被分成不同顔色的多段。每段的 結束位置(範圍是[0,1]) 和 顔色 可以通過一個數組來表示。預設取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。
width: 5, //軸線寬度,預設 30。
shadowBlur: 20, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設定圖形的陰影效果。
shadowColor: "#fff", //陰影顔色。支援的格式同color。
}
},
splitLine: { // 分隔線樣式。
show: true, // 是否顯示分隔線,預設 true。
length: -25, // 分隔線線長。支援相對半徑的百分比,預設 30。
lineStyle: { // 分隔線樣式。
color: "#eee", //線的顔色,預設 #eee。
opacity: 0, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。
width: 2, //線度,預設 2。
type: "solid", //線的類型,預設 solid。 此外還有 dashed,dotted
shadowBlur: 10, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設定圖形的陰影效果。
shadowColor: "#fff", //陰影顔色。支援的格式同color。
}
},
axisTick: { // 刻度(線)樣式。
show: true, // 是否顯示刻度(線),預設 true。
splitNumber: 5, // 分隔線之間分割的刻度數,預設 5。
length: 0, // 刻度線長。支援相對半徑的百分比,預設 8。
lineStyle: { // 刻度線樣式。
color: "#eee", //線的顔色,預設 #eee。
opacity: 1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。
width: 1, //線度,預設 1。
type: "solid", //線的類型,預設 solid。 此外還有 dashed,dotted
shadowBlur: 10, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設定圖形的陰影效果。
shadowColor: "#fff", //陰影顔色。支援的格式同color。
},
},
axisLabel: { // 刻度标簽。
show: true, // 是否顯示标簽,預設 true。
distance: 5, // 标簽與刻度線的距離,預設 5。
color: "#fff", // 文字的顔色,預設 #fff。
fontSize: 12, // 文字的字型大小,預設 5。
formatter: "{value}", // 刻度标簽的内容格式器，支援字元串模闆和回調函數兩種形式。 示例:// 使用字元串模闆，模闆變量為刻度預設标簽 {value},如:formatter: '{value} kg'; // 使用函數模闆，函數參數分别為刻度數值,如formatter: function (value) {return value + 'km/h';}
},
pointer: { // 儀表盤指針。
show: true, // 是否顯示指針,預設 true。
length: "70%", // 指針長度，可以是絕對數值，也可以是相對于半徑的百分比,預設 80%。
width: 5, // 指針寬度,預設 8。
},
itemStyle: { // 儀表盤指針樣式。
color: "auto", // 指針顔色，預設(auto)取數值所在的區間的顔色
opacity: 1, // 圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。
borderWidth: 0, // 描邊線寬,預設 0。為 0 時無描邊。
borderType: "solid", // 柱條的描邊類型，預設為實線，支援 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 圖形的描邊顔色,預設 "#000"。支援的顔色格式同 color，不支援回調函數。
shadowBlur: 10, // (發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設定圖形的陰影效果。
shadowColor: "#fff", // 陰影顔色。支援的格式同color。
},
emphasis: { // 高亮的 儀表盤指針樣式
itemStyle: {
//高亮 和正常 兩者具有同樣的配置項,隻是在不同狀态下配置項的值不同。
}
},
title: { // 儀表盤标題。
show: true, // 是否顯示标題,預設 true。
offsetCenter: [0,"20%"],//相對于儀表盤中心的偏移位置，數組第一項是水準方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對于儀表盤半徑的百分比。
color: "#fff", // 文字的顔色,預設 #333。
fontSize: 20, // 文字的字型大小,預設 15。
},
detail: { // 儀表盤詳情，用于顯示資料。
show: true, // 是否顯示詳情,預設 true。
offsetCenter: [0,"50%"],// 相對于儀表盤中心的偏移位置，數組第一項是水準方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對于儀表盤半徑的百分比。
color: "auto", // 文字的顔色,預設 auto。
fontSize: 30, // 文字的字型大小,預設 15。
formatter: "{value}%", // 格式化函數或者字元串
},
data: data1
},
{
name: "儀表盤",
type: "gauge", // 系列類型
radius: "45%", // 參數:number, string。 儀表盤半徑,預設 75% ，可以是相對于容器高寬中較小的一項的一半的百分比，也可以是絕對的數值。
center: ["18%", "55%"], // 儀表盤位置(圓心坐标)
startAngle: 225, // 儀表盤起始角度,預設 225。圓心 正右手側為0度，正上方為90度，正左手側為180度。
endAngle: -45, // 儀表盤結束角度,預設 -45
clockwise: true, // 儀表盤刻度是否是順時針增長,預設 true。
min: 0, // 最小的資料值,預設 0 。映射到 minAngle。
max: 100, // 最大的資料值,預設 100 。映射到 maxAngle。
splitNumber: 10, // 儀表盤刻度的分割段數,預設 10。
axisLine: { // 儀表盤軸線(輪廓線)相關配置。
show: true, // 是否顯示儀表盤軸線(輪廓線),預設 true。
lineStyle: { // 儀表盤軸線樣式。
color: [[1,'gray']],
opacity: 1, //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。
width: 2, //軸線寬度,預設 30。
shadowBlur: 20, //(發光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設定圖形的陰影效果。
shadowColor: "#fff", //陰影顔色。支援的格式同color。
}
},
splitLine: { // 分隔線樣式。
show: false
},
axisTick: { // 刻度(線)樣式。
show: false
},
axisLabel: { // 刻度标簽。
show: false
},
pointer: { // 儀表盤指針。
show: false
},
title: { // 儀表盤标題。
show: false
},
detail: { // 儀表盤詳情，用于顯示資料。
show: false // 是否顯示詳情,預設 true。
},
data: [{name:'',value:''}]
}
]
};
let volume4 = this.$echarts.init(document.getElementById('volume4'));
volume4.setOption(option)
}