Vue echart實現柱狀圖,電池圖,3D柱圖和3D圓柱圖程式碼詳解
阿新 • • 發佈：2022-01-24
目錄
- 電池圖
- 3D柱狀圖+3個柱圖+圖例不能點選
- 3D圓筒柱狀圖
- 3D圓筒柱狀圖+背景
- 電池圖
- 自動播放+底部可拖拽
- 比電池圖好看一點的進度條
- 總結
電池圖
let backgroundColor = 'rgba(0,1)';
let chartdata = [
[111,222,333,444],['石油','煤礦','汽油','電力'],];
var getmydmc = chartdata[1]; //資料點名稱
var getmyd = chartdata[0]; //收入金額
var getmydzd = [];
let big = 0;
getmyd.forEach((el) => {
if (!(el === undefined || el === '')) {
if (big < Number(el)) {
big = Number(el);
}
}
});
for (let i = 0; i < getmyd.length; i++) {
getmydzd.push(big * 4);
}
//計算最大值
function calMax(arr) {
let max = 0;
arr.forEach((el) => {
el.forEach((el1) => {
if (!(el1 === undefined || el1 === '')) {
if (max < Number(el1)) {
max = Number(el1);
}
}
});
});
let maxint = Math.ceil(max / 9.5);
//不讓最高的值超過最上面的刻度
let maxval = maxint * 10;
//讓顯示的刻度是整數
return maxval;
}
var max = Math.ceil(calMax([getmyd]) / 10) * 10;
option = {
backgroundColor: backgroundColor,grid: {
left: '3%',right: '13%',bottom: '10%',top: '10%',containLabel: true,},tooltip: {
formatter: (params) => {
if (params.name !== '') {
return params.name+ ' : ' + getmyd[params.dataIndex];
}
},textStyle: {
align: 'left',xAxis: [
{
type: 'value',axisLabel: {
margin: 5,color: '#fff',formatter: function (val) {
return val + '';
},textStyle: {
fontSize: '13',min: 0,max: max,// 計算最大值
interval: max / 5,// 平均分為5份
splitNumber: 5,splitLine: {
show: false,lineStyle: {
color: '#fff',axisLine: {
show: true,width: 1,opacity: 0.3,axisTick: {
show: false,{
type: 'value',axisLabel: {
show: false,// 計算最大值
interval: max / 10,// 平均分為5份
splitNumber: 10,lineStyle: {
type: 'dashed',color: '#D8D8D8', 3D柱狀圖+3個柱圖+圖例不能點選
// mock資料
const dataArr = {
xdata: ['01.01','01.02','01.03','01.04','01.05','01.06','01.07'],vaccination: [1000,1300,1200,800,600,700,900],unvaccinated: [700,900,500,300,400,500],unvaccinatedTwo: [400,200,100,300],rateDataOne: [98,96,97,92,94,95,100],rateDataTwo: [88,86,87,82,84,85,95],}
// tooltip
const tooltip = {
trigger: "axis",textStyle: { fontSize: '100%' },formatter: params => {
let rander = params.map(item => item.seriesType !== "pictorialBar" ? `<div>${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value + "%"}</div>` : '').join('')
return `
<div>${params[0].axisValue}</div>
${rander}
`
}
}
const legend = {
data: ['應接種','已完成第一次接種','已完成第二次接種','完成第一次接種率','完成第二次接種率'],textStyle: { fontSize: 14,color: '#fff'},itemWidth: 25,itemHeight: 15,itemGap: 15,bottom: '5%',selectedMode: false
}
const grid = { top: '18%',left: '10%',right: '6%',bottom: '25%'}
// xAxis
const xAxis = {
axisTick: { show: true },axisLine: { lineStyle: { color: 'rgba(255,.2)' } },axisLabel: { textStyle: { fontSize: 12,color: '#fff' },data: dataArr.xdata
}
// yAxis
const yAxis = [{
axisTick: { show: false },axisLine: { show: false,splitLine: { lineStyle: { color: 'rgba(255,.05)' } },axisLabel: { textStyle: { fontSize: 16,color: '#fff' } }
},{
show: true,max: 100,splitLine: { show:false },axisLine: { show: false },axisTick: { show: false },axisLabel: {
textStyle: { fontSize: 16,color: '#fff' },formatter: params => {
return `${params}%`
}
}
}]
// series
const series = [{
z: 1,name: '上部1',type: 'pictorialBar',symbolPosition: 'end',data: dataArr.vaccination,symbol : 'diamond',symbolOffset: ['-50%','-50%'],symbolSize: [29,19],itemStyle: {
borderColor: '#2fffa4',color: '#2fffa4'
},{
z: 1,name: '應接種',barWidth: 30,barGap: '-50%',itemStyle: {
color: {
type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [
{ offset: 0,color: 'rgba(29,245,160,.7)' },{ offset: 0.5,.3)' },{ offset: 1,.3)' }
]
}
},{
z: 2,data: dataArr.unvaccinated,symbolOffset: [0,itemStyle: {
borderColor: '#32ffee',color: '#32ffee'
},name: '已完成第一次接種',color: 'rgba(50,238,{
z: 3,data: dataArr.unvaccinatedTwo,symbolOffset: ['50%',itemStyle: {
borderColor: '#ffd11a',color: '#ffd11a'
},name: '已完成第二次接種',color: 'rgba(255,209,26,{
z: 9,yAxisIndex: 1,name: '完成第一次接種率',type: 'line',symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,symbolSize: [10,10],color: {
type: 'linear',x: 1,x2: 0,// 0% 處的顏色 // 100% 處的顏色
colorStops: [{ offset: 0,color: '#32ffee' },color: '#8afff5'}],global: false // 預設為 false
},lineStyle: { color: {
type: 'linear',global: false // 預設為 false
}},// 修改的是線下區域的顏色
areaStyle: {
color: new echarts.graphic.LinearGradient(
// 右/下/左/上
0,1,[
{ offset: 0,.1)' },color: 'transparent' }
])
},label: {
show: true,position: 'insideBottomLeft',formatter: params => {
return `${params.value}%`
},textStyle: { fontSize: 16,color: '#32ffee' }
},data: dataArr.rateDataOne
},name: '完成第二次接種率',color: '#ffd11a' },color: '#fff5cc'}],.2)' },position: 'insideBottomRight',color: '#ffd11a' }
},data: dataArr.rateDataTwo
}]
option = { tooltip,xAxis,yAxis,series,grid,legend,backgroundColor: 'rgba(0,.7)' }
3D圓筒柱狀圖
xData = ["正常裝置","報警裝置","離線裝置","故障裝置"];
yData = [14350,298,5037,239];
option = {
backgroundColor: '#061326',"grid": {
"top": "25%","left": "-5%","bottom": "5%","right": "5%","containLabel": true
},tooltip: {
show: true
},animation: false,"xAxis": [{
"type": "category","data": xData,"axisTick": {
"alignWithLabel": true
},"nameTextStyle": {
"color": "#82b0ec"
},"axisLine": {
show: false,"lineStyle": {
"color": "#82b0ec"
}
},"axisLabel": {
"textStyle": {
"color": "#fff"
},margin: 30
}
}],"yAxis": [{
show: false,"type": "value","splitLine": {
"lineStyle": {
"color": "#0c2c5a"
}
},"axisLine": {
"show": false
}
}],"series": [{
"name": "",symbolSize: [40,-6],z: 12,// "barWidth": "0","label": {
"normal": {
"show": true,"position": "top",// "formatter": "{c}%"
fontSize: 15,fontWeight: 'bold',color: '#34DCFF'
}
},color: "#2DB1EF",data: yData
},{
name: '',7],// "barWidth": "20","color": "#2DB1EF","data": yData
},symbolSize: [50,12],z: 10,itemStyle: {
normal: {
color: 'transparent',borderColor: '#2EA9E5',borderType: 'solid',borderWidth: 1
}
},symbolSize: [70,20],18],borderColor: '#19465D',borderWidth: 2
}
},{
type: 'bar',//silent: true,"barWidth": "40",barGap: '10%',// Make series be overlap
barCateGoryGap: '10%',itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0,0.7,[{
offset: 0,color: "#38B2E6"
},{
offset: 1,color: "#0B3147"
}
]),opacity: .8
},data: yData
}
]
};
3D圓筒柱狀圖+背景
var xData2 = ["容城谷莊","雄縣七間房","安新三臺","雄縣張崗","安新寨裡"];
var data1 = [200,100];
var data2 = [300,400];
option = {
backgroundColor: '#021132',tooltip: {
trigger: 'item',grid:{
left:100,bottom:100
},xAxis: {
data: xData2,axisTick: {
show: false
},axisLine: {
show: false
},axisLabel: {
interval:0,textStyle: {
color: '#fff',fontSize:20,margin: 20,//刻度標籤與軸線之間的距離。
},yAxis: {
splitLine: {
show: false,axisLabel: {
textStyle: {
color: '#fff',}
},series: [
{//三個最低下的圓片
"name": "","type": "pictorialBar","symbolSize": [45,25],"symbolOffset": [0,"z": 12,itemStyle:{
opacity:1,color: function(params){
var a = params.name.slice(0,2);
if(a === '容城'){
return new echarts.graphic.LinearGradient(0,[{
offset: 0,color: '#FF9A22' // 0% 處的顏色
},color: '#FFD56E'// 100% 處的顏色
}],false)
}else if(a === '雄縣' || a === '雄州'){
return new echarts.graphic.LinearGradient(0,color: '#00EC28' // 0% 處的顏色
},color: '#5DF076'// 100% 處的顏色
}],false)
}else if(a === '安新'){
return new echarts.graphic.LinearGradient(0,color: '#12B9DB' // 0% 處的顏色
},color: '#6F8EF2'// 100% 處的顏色
}],false)
}
}
},"data": [1,1]
},//下半截柱狀圖
{
name: '2020',barWidth: 45,itemStyle: {//lenged文字
opacity:.7,http://www.cppcns.com color: '#FFD56E'// 100% 處的顏色
}],data: data1
},{ // 替代柱狀圖 預設不顯示顏色，是最下方柱圖（郵件營銷）的value值 - 20
type: 'bar',stack: '廣告',itemStyle: {
color: 'transparent'
},{
"name": "",//頭部
"type": "pictorialBar","symbolPosition": "end",itemStyle:{
color:'#163F7A',opacity:1,"data": data2
},"data": data1
},{
name: '2019',z:0,itemStyle: {
color: '#163F7A',opacity:.7,data: data2
}
]
};
電池圖
var category= [{
name: "血糖偏高",value: 2500
},{
name: "血糖偏低",value: 8000
},{
name: "血壓偏高",value: 3000
},{
name: "血壓偏低",{
name: "當日新增",value: 3000
}
]; // 類別
var datas = [];
category.forEach(value => {
datas.push(value.value);
});
option = {
backgroundColor:'#333',xAxis: {
splitLine: {
show: false
},axisLabel: {
show: false
},axisTick: {
show: false
}
},grid: {
left: 80,top: 20,// 設定條形圖的邊距
right: 80,bottom: 20
},yAxis: [{
type: "category",inverse: false,data: category,axisLabel: {
show: false
}
}],series: [{
// 內
type: "bar",barWidth: 18,legendHoverLink: false,silent: true,itemStyle: {
normal: {
barBorderRadius:[4,4,4],color: function(params) {
var color;
if(params.dataIndex==19){
color = {
type: "linear",colorStops: [{
offset: 0,color: "#66b1ff" // 0% 處的顏色
},{
offset: 1,color: "#409eff" // 100% 處的顏色
}
]
}
}else if(params.dataIndex==18){
color = {
type: "linear",colorStops: [{
offset: 0,color: "#409eff" // 100% 處的顏色
}
]
}
}else if(params.dataIndex==17){
color = {
type: "linear",colorStops: [{
offsewww.cppcns.comt: 0,http://www.cppcns.com color: "#409eff" // 100% 處的顏色
}
]
}
}else{
color = {
type: "linear",color: "#409eff" // 100% 處的顏色
}
]
}
}
return color;
},}
},label: {
normal: {
show: true,position: "left",formatter: "{b}",textStyle: {
color: "#fff",fontSize: 14
}
}
},z: 1,animationEasing: "elasticOut"
},{
// 分隔
type: "pictorialBar",itemStyle: {
normal:{
color:"#333"
}
},symbolRepeat: "fixed",symbolMargin: 6,symbol: "rect",21],symbolPosition: "start",symbolOffset: [1,-1],z: 2,{
// 外邊框
type: "pictorialBar",itemStyle: {
normal: {
color: "none"
}
},label: {
normal: {
formatter: (params) => {
var text;
if(params.dataIndex==1){
text = '{f| '+params.data+'}';
}else if(params.dataIndex==2){
text = '{f| '+params.data+'}';
}else if(params.dataIndex==3){
text = '{f| '+params.data+'}';
}else{
text = '{f| '+params.data+'}';
}
return text;
},rich:{
f:{
color:"#ffffff"
}
},show: true
}
},data: datas,animationEasing: "elasticOut"
}
]
};
自動播放+底部可拖拽
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-wFj7O4Ze-1642648129132)(C:\Users\Q\AppData\Local\Temp\1642643635888.png)]](https://img.796t.com/res/2022/01-23/10/b26327469f8bd9b073c929b0094577f0.png)
var option = {
title: {
text: '門禁告警數量',textStyle: {
fontSize: 25,fontWeight: 'normal',x: 'center'
},backgroundColor:'#323a5e',tooltip: {
trigger: 'axis',axisPointer: { // 座標軸指示器，座標軸觸發有效
type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
}
},grid: {
left: '2%',right: '4%',bottom: '14%',top:'16%',containLabel: true
},legend: {
data: ['門禁常開告警','門禁離線告警'],right: 10,top:12,textStyle: {
color: "#fff"
},itemWidth: 12,itemHeight: 10,// itemGap: 35
},xAxis: {
type: 'category',data: ['萬城社群','花溪社群','人民社群','齒輪廠家屬社群','融創社群','元琦林居社群','花城社群','楊中村'],axisLine: {
lineStyle: {
color: 'white'
}
},axisLabel: {
// interval: 0,// rotate: 40,textStyle: {
fontFamily: 'Microsoft YaHei'
}
},yAxis: {
type: 'value',max:'150',axisLine: {
show: false,lineStyle: {
color: 'white'
}
},splitLine: {
show: true,lineStyle: {
color: 'rgba(255,0.3)'
}
},axisLabel: {}
},"dataZoom": [{
"show": true,"height": 12,"xAxisIndex": [
0
],bottom:'8%',"start": 10,"end": 90,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,1.8,4V413z',handleSize: '110%',handleStyle:{
color:"#d3dee5",textStyle:{
color:"#fff"},borderColor:"#90979c"
},{
"type": "inside","show": true,"height": 15,"start": 1,"end": 35
}],series: [{
name: '門禁常開告警',barWidth: '15%',itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0,[{
offset: 0,color: '#fccb05'
},{
offset: 1,color: '#f5804d'
}]),barBorderRadius: 12,data: [10,30,40,120,50,90,60,15]
},{
name: '門禁離線告警',color: '#8bd46e'
},color: '#09bcb7'
}]),barBorderRadius: 11,}
},data: [5,110,70,20]
}]
};
var app = {
currentIndex: -1,};
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的圖形
myChart.dispatchAction({
type: 'downplay',seriesIndex: 0,dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮當前圖形
myChart.dispatchAction({
type: 'highlight',dataIndex: app.currentIndex,});
// 顯示 tooltip
myChart.dispatchAction({
type: 'showTip',dataIndex: app.currentIndex
});
},1000);
比電池圖好看一點的進度條
![[外鏈圖片轉存失敗,建議將圖片儲存下來直接上傳(img-I6MqCkPB-1642648129132)(C:\Users\Q\AppData\Local\Temp\1642643746328.png)]](https://img.796t.com/res/2022/01-23/10/f38d4859c0d2089a5d2283baab9b7281.png)
let backgroundColor = 'rgba(0,1)';
let chartData = [
[0,20,['AAA','BBB','CCC','DDD'],];
let getmydmc = chartData[1]; //資料點名稱
let getmyd = chartData[0]; //收入金額
let getmydzd = [];
let big = 0;
getmyd.forEach((el) => {
if (!(el === undefined || el === '' || el === 0)) {
if (big < Number(el)) {
big = Number(el);
}
} else {
big = 100;
}
});
for (let i = 0; i < getmyd.length; i++) {
getmydzd.push(big * 4);
}
//計算最大值
function calMax(arr) {
let max = 0;
arr.forEach((el) => {
el.forEach((el1) => {
if (!(el1 === undefined || el1 === '' || el1 === 0)) {
if (max < Number(el1)) {
max = Number(el1);
}
} else {
max == 100;
}
});
});
let maxint = Math.ceil(max / 9.5);
//不讓最高的值超過最上面的刻度
let maxval = maxint * 10;
//讓顯示的刻度是整數
return maxval;
}
const max = Math.ceil(calMax([getmyd]) / 10) * 10;
option = {
backgroundColor: backgroundColor,grid: {
left: '10%',right: '10%',bottom: '0%',top: '5%',// containLabel: true,tooltip: {
formatter: (params) => {
if (params.name !== '') {
return params.name + ' : ' + getmyd[params.dataIndex];
}
},yAxis: [
{
inverse: false,axisLabel: {
padding: [0,inside: true,textStyle: {
fontSize: 14,fontFamily: 'PingFang SC',fontWeight: 400,color: '#d2d2d2',align: 'left',textShadowColor: '#00d6ff',textShadowOffsetX: 0,textShadowOffsetY: 0,textShadowBlur: 5,formatter: '{value}\n{a|佔位}',rich: {
a: {
color: 'transparent',lineHeight: 30,fontFamily: 'digital',fontSize: 14,// offset: 0,{
//左側柱狀圖的Y軸
gridIndex: 0,//y軸所在的 grid 的索引
splitLine: 'none',axisTick: 'none',axisLine: 'none',axisLabel: {
show: true,verticalAlign: 'bottom',10,18,textStyle: {
color: '#fff',fontSize: '14',formatter: function (value) {
return '{x|' + value + '}';
// return '{x|' + value + '} {y|' + '%}';
},rich: {
y: {
color: '#3dffef',fontFamily: 'Orbitron',x: {
color: '#3dffef',// barGap: '100%',padding: 10,label: {
show: false,itemStyle: {
normal: {
borderRadius: 0,color: '#46B7ED',color: '#48EDD3',symbolRotate: '-25',itemStyle: {
normal: {
color: 'rgba(1,12,38,0.4)',symbolSize: [5,22],-2],barWidth: 24,barGap: '-118%',itemStyle: {
normal: {
color: 'rgba(5,59,113,0.7)',borderRadius: 0,// borderColor: 'rgba(0,236,1)',borderColor: new echarts.graphic.LinearGradient(
0,[
{
offset: 0,color: '#015EFE',color: '#10C2E8',false
),z: -1,{
type: 'pictorialBar',name: '左內邊框',symbolSize: [3,// symbolKeepAspect: true,// animationEasing: 'none',opacity: 1,z: 99,data: new Array(getmyd.length).fill(1),};
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!