How to realize histogram, Battery Chart, 3D histogram and 3D Cylindrical Chart in Vue echart

This article mainly shows you "Vue echart how to achieve bar chart, battery chart, 3D bar chart and 3D column chart", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve bar chart, battery chart, 3D bar chart and 3D column chart" this article.

Battery diagram

Let backgroundColor = 'rgba'; let chartdata = [111,222,333,444], ['oil', 'coal mine', 'gasoline', 'electricity'],]; var getmydmc = chartdata [1]; / / data point name var getmyd = chartdata [0]; / / income amount 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) =>

Let backgroundColor = 'rgba'; let chartData = [0Magne20 CCC', 333, 0], ['AAA',' BBB', 'CCC',' DDD'],]; let getmydmc = chartData [1]; / / the data point is named let getmyd = chartData [0]; / / the amount of income 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) =>