echarts超全超詳情配置項
阿新 • • 發佈：2020-09-09
原date: 2018-11-20 14:35:18
連結
官方API連結
官方例項連結
官方Gallery更多例項連結
在vue中如何使用
常見通用配置項
option = { // 標題元件，包含主標題和副標題 title: { text: '世界人口總量', subtext: '資料來自網路' }, // 圖例元件 legend: { data: ['2011年', '2012年'] }, // 上下左右及大小-設定圖表佔總面積的地方 grid:{x: '5%', y: '2%', width: '80%', height: '90%'}, dataset: { // 用 dimensions 指定了維度的順序。直角座標系中， // 預設把第一個維度對映到 X 軸上，第二個維度對映到 Y 軸上。 // 如果不指定 dimensions，也可以通過指定 series.encode // 完成對映，參見後文。 dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, // grid座標系的x軸 xAxis: { type: 'category', }, // grid座標系的y軸 yAxis: { type: 'category', }, // 區域縮放 dataZoom: [ { type: 'slider', show: true, start: 0, end: 100, handleSize: 8 }, ], // 提示框元件 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, //工具欄。內建有匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具。 toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, // 單獨的資料集宣告 dataset: { // 用 dimensions 指定了維度的順序。直角座標系中， // 預設把第一個維度對映到 X 軸上，第二個維度對映到 Y 軸上。 // 如果不指定 dimensions，也可以通過指定 series.encode // 完成對映，參見後文。 dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, // 系列列表。每個系列通過 type 決定自己的圖表型別 series: [ { type: 'bar', startAngle: 300, minAngle: 15, radius: ['100%', '60%'], center: ['50%', '50%'], barWidth: 20 }, { type: 'bar', startAngle: 300, minAngle: 15, radius: ['100%', '60%'], center: ['50%', '50%'], barWidth: 20 }, { type: 'bar', startAngle: 300, minAngle: 15, radius: ['100%', '60%'], center: ['50%', '50%'], barWidth: 20 } ], // 調色盤顏色列表。如果系列沒有設定顏色，則會依次迴圈從該列表中取顏色作為系列顏色。 color:['#4181E4','#5CCED4'], // 背景色，預設無背景。 backgroundColor:'#eee', // 全域性的字型樣式。 textStyle:{ color:'#f00' } };
元件其它設定
顏色漸變
color:[new echarts.graphic.LinearGradient( 0, 0, 0, 1, //4個引數用於配置漸變色的起止位置, 這4個引數依次對應右/下/左/上四個方位. 而0 0 0 1則代表漸變色從正上方開始 [ {offset: 0, color: '#459BF6'}, {offset: 1, color: '#61D2D6'} ] //陣列, 用於配置顏色的漸變過程. 每一項為一個物件, 包含offset和color兩個引數. offset的範圍是0 ~ 1, 用於表示位置 ),'#556783'],
js控制echarts
window.eventBus實現vue頁面與普通js資料通訊
重點：用window.eventBus而不是this.eventBus，因為普通js裡面的this是代表vue，而普通js獲取不到vue的值。
main.js
// 引入eventBus
import EventBus from './bus/eventBus';
Vue.prototype.$eventBus = EventBus;
if (window) {
window.$eventBus = EventBus;
}
page.vue
window.$eventBus.$emit('residenceData', resData.map(v => v.lx));
index.js
var attackSourcesName = [];
window.$eventBus.$on('residenceData',v=>{
attackSourcesName = v;
})
echarts與elementUI中的carousel走馬燈結合的輪播
<el-carousel :interval="3000" arrow="always" class="img-box">
<el-carousel-item
v-for="(item,index) in 2"
:key="index" >
<div v-if="0 === index">
<ehcart ref="echrts_educationals" config='home-service-educational' height="2.32rem" width='4.63rem'/>
</div>
<div v-if="1 === index">
<ehcart ref="echarts_ages" config="home-ageCollection" height="2.32rem" width='4.63rem'/>
</div>
</el-carousel-item>
</el-carousel>
...
let echart1 = this.$refs.echrts_educationals[0];
echart1.option.series[0].data = [];
echart1.resizeB();
echart1.refresh();
let echart2 = this.$refs.echarts_ages[0];
echart2.option.xAxis[0].data = [];
echart2.resizeB();
echart2.refresh();
resizeB的具體方法：
resizeB: function () {
let timer1 = setTimeout(() => {
this.chart.resize()
// console.log('呼叫了改變echart自適應')
this.chart.setOption(this.option);
clearTimeout(timer1)
}, 400)
}
普通的控制顯示隱藏
用v-if，不要用v-show，這樣就會重新生成DOM，而不是顯示隱藏。
常用圖表——折線圖、柱狀圖、餅圖
折線圖-line
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
areaStyle:{}, // 新增區域表示有面積
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
柱狀圖-bar
柱狀圖橫/豎向顯示
豎向
xAxis: {
type: 'category'
},
yAxis: {
type: 'value',
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
},
橫向
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
},
堆疊
重點：所有資料有一個共同的stack，如stack: '總量'。
series: [
{
name: '聯盟廣告',
type: 'bar',
stack: '總量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視訊廣告',
type: 'bar',
stack: '總量',
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜尋引擎',
type: 'bar',
stack: '總量',
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
餅圖-pie
普通餅圖
重點：type: 'pie',radius: '55%',
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視訊廣告'},
{value: 1548, name: '搜尋引擎'}
],
}
]
圓環餅圖
重點：type: 'pie',radius: ['50%', '70%'],
series: [
{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視訊廣告'},
{value: 1548, name: '搜尋引擎'}
]
}
]
其它不常用echarts圖
儀表盤
var value = '4.3';
var subtext = `樣本量：2233`;
var max = 5;
import echarts from 'echarts'
export const option = {
title: {
show: true,
text: value || "儀表盤",
subtext,
subtextStyle: {
align: "center",
},
left: 400,
bottom: 10,
textStyle: {
color: '#414957',
fontSize: 24,
align: 'center',
fontFamily: '"Microsoft Yahei","微軟雅黑"',
},
},
grid:{x: '5%', y: '2%', width: '80%', height: '90%'},
angleAxis: {
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
min: 0,
max: 6.666,
// boundaryGap: ['0', '10'],
startAngle: 225
},
radiusAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: ['a', 'b', 'c'],
z: 10
},
polar: {
radius: '100%'
},
series: [{
type: 'bar',
data: [, , value],
z: 1,
coordinateSystem: 'polar',
barMaxWidth: 18,
name: '警告事件',
roundCap: true,
color: '#4181E4',
barGap: '-100%',
},
{
type: 'bar',
data: [, , ],
z: 2,
coordinateSystem: 'polar',
barMaxWidth: 18,
name: '警告事件',
roundCap: true,
color: '#f00',
barGap: '-100%',
},
{
type: 'bar',
data: [, , max],
z: 0,
silent: true,
coordinateSystem: 'polar',
barMaxWidth: 18,
name: 'C',
roundCap: true,
color: '#fff',
barGap: '-100%',
},
{
type: 'pie',
labelLine: {
show: false
},
z: 1,
radius: 14,
data: [{
value: 5,
itemStyle: {
color: 'rgba(108,116,132,0.15)',
}
}]
}, {
type: 'pie',
labelLine: {
show: false
},
z: 10,
radius: 3,
data: [{
value: 100,
itemStyle: {
color: '#fff',
}
}]
}, {
type: 'gauge',
radius: '85%',
splitNumber: 4,
max: 5,
detail: {
show: false,
},
axisLine: {
// 座標軸線
lineStyle: {
// 屬性lineStyle控制線條樣式
color: [
[0, "#4181E4"],
[1, "#4181E4"]
],
width: 25,
opacity: 0 //刻度背景寬度
}
},
"data": [{
"name": "",
"value": value,
}],
splitLine: {
length: 12, //長刻度節點線長度
lineStyle: {
width: 2,
color: "#c4c6cc"
} //刻度節點線
},
axisTick: {
show: true,
lineStyle: {
color: "#c4c6cc",
width: 2
},
length: 5,
splitNumber: 6
},
axisLabel: {
show: false,
color: '#333',
fontSize: 18,
},
pointer: {
show: true,
length: '70%',
itemStyle: {
color: '#DE585D',
}
},
},
{
"type": "pie",
radius: ['88%', '82%'],
"hoverAnimation": false,
startAngle: 225,
endAngle: 0,
"data": [{
"name": "",
"value": value / 5,
"label": {
show: false
},
"labelLine": {
show: false
},
itemStyle: {
color: 'rgba(0,0,0,0)'
}
},
{ //畫中間的圖示
"name": "",
"value": 0,
"label": {
position: 'inside',
backgroundColor: '#fff',
borderRadius: 7,
padding: 3,
borderWidth: 0,
borderColor: "#fff"
}
}, {
"name": "",
value: 1.33 - value / 5,
"label": {
show: false
},
"labelLine": {
show: false
},
itemStyle: {
color: 'rgba(255,255,255,0)'
}
}
]
}
],
tooltip: {
show: false
},
}
滾動柱狀圖排行榜
var index = 0;
var colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff'];
var attackSourcesName = ["中心村村委會", "中溝村村委會", "眾眾新家園居委會", "眾安居委會", "光明村村委會", "光輝村村委會", "興銀花園居委會", "北橋居委會", "北橋村村委會", "向陽村村委會", "君臨花園居委會", "君蓮新城第一居委會", "君蓮新城第三居委會", "君蓮新城第二居委會", "君蓮新城第五居委會", "君蓮新城第四居委會", "復地北橋城居委會", "好世鳳凰城居委會", "安樂村村委會", "招商雍華苑居委會", "文博水景居委會", "日月華城居委會", "星河灣居委會", "櫻緣花園居委會", "燈塔村村委會", "秀龍居委會", "繁盛苑居委會", "翔泰苑居委會", "莘閔榮順苑居委會", "都市富苑居委會", "金榜新苑居委會", "金都新村第三居委會", "銀春花園居委會", "銀橋花園居委會", "銀都苑第一居委會", "銀都苑第三居委會", "集體村村委會", "顓橋村村委會", "顓溪新村第五居委會", "顓溪新村第八居委會", "駿苑居委會"];
function contains(arr, dst) {
var i = arr.length;
while (i -= 1) {
if (arr[i] == dst) {
return i;
}
}
return false;
}
option = {
color:['#5CCED4','#4181E4'],
dataZoom:[{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 10,
handleSize: 0,
showDetail: false,
start: 0,
end: 16, // 百分比，此處是計算後傳過來
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '100%',
handleStyle: {
color: "#d3dee5",
},
borderColor: "#90979c"
}, {
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 0,
end: 50,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true
}],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
show: false
},
backgroundColor: '#0D2062',
extraCssText: '#63C5E0',
formatter: function(datas) {
let res = '<p style="color:rgba(255,255,255,1);padding:0 5px;font-size: .14rem;">'+datas[0].axisValue+'</p>';
for(var i in datas) {
res+='<p style="color:rgba(162,214,255,1);padding:0 5px;font-size: .14rem;">'+datas[i].seriesName + ' ' +datas[i].value[datas[i].seriesName]+'</p>';
}
return res
}
},
grid:{x: '25%', y: '2%', width: '70%', height: '90%'},
xAxis: {
show: true,
type: 'value',
splitLine: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
fontSize: '12px',
color: '#fff'
}
},
},
yAxis: {
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisPointer: {
label: {
show: true,
margin: 30
}
},
data: attackSourcesName,
axisLabel: {
interval: 0,
textStyle: {
fontSize: '.12rem',
color: '#fff'
},
margin: 100,
fontSize: 14,
align: 'left',
color: '#333',
rich: {
a1: {
color: '#fff',
backgroundColor: colorList[0],
width: 15,
height: 15,
align: 'center',
borderRadius: 2
},
a2: {
color: '#fff',
backgroundColor: colorList[1],
width: 15,
height: 15,
align: 'center',
borderRadius: 2
},
a3: {
color: '#fff',
backgroundColor: colorList[2],
width: 15,
height: 15,
align: 'center',
borderRadius: 2
},
b: {
color: '#fff',
backgroundColor: colorList[3],
width: 15,
height: 15,
align: 'center',
borderRadius: 2
}
},
formatter: function(params) {
let index1 = params.indexOf('#');
let num = params.slice(index + 1);
let newParams = params.slice(0, index1);
var newParamsName = "";// 最終拼接成的字串
var paramsNameNumber = newParams.length;// 實際標籤的個數
if(paramsNameNumber<=5){
newParamsName = newParams;
}else{
newParamsName = newParams.substring(0,4) + "...";
}
index = contains(attackSourcesName, params) + 1;
params = newParamsName;
if (index - 1 < 3) {
return [
'{a' + index + '|' + index + '}' + ' ' + params
].join('\n')
} else {
return [
'{b|' + index + '}' + ' ' + params
].join('\n')
}
}
}
},
series: [
{
name: '戶籍',
type: 'bar',
stack: '總量',
label: {
show: true
},
barWidth: 10,
data: [1, 1, 3, 1, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0]
},
{
name: '居住',
type: 'bar',
stack: '總量',
label: {
show: true,
position: 'left'
},
barWidth: 10,
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 28, 5, 0, 1, 0, 0, 0]
}
]
};