Vue 之 echarts 圖表數據可視化常用的一些圖表/動態圖表/3D圖表的簡單整理

目錄

Vue 之 echarts 圖表數據可視化常用的一些圖表/動態圖表/3D圖表的簡單整理

一、簡單介紹

二、效果預覽

三、注意事項

四、各種 echarts 圖表（含代碼）

五、工程代碼

---

一、簡單介紹

Vue 開發的一些知識整理，方便后期遇到類似的問題，能夠及時查閱使用。

本節介紹，vue 中添加 echarts ，然后在 vue 中簡單使用一些 echarts中常用的圖表，包括一些動態的圖表、3D的圖表等 ，如果有不足之處，歡迎指出，或者你有更好的方法，歡迎留言。

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

ECharts 針對移動端交互做了細致的優化，例如移動端小屏上適于用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放（用鼠標滾輪）、平移等。

Echarts 官網文檔：Handbook - Apache ECharts

Echarts 官網示例：Examples - Apache ECharts

操作環境：

• win 10
• node v14.20.0
• npm 8.5.3
• @vue/cli 5.0.6
• vue 2.6.14
• echarts 5.3.3
• echarts-liquidfill 3.1.0
• echarts-gl 2.0.9

二、效果預覽

（有若干圖表其實是動態的）

三、注意事項

1、使用水球圖時（echarts-liquidfil插件），echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

npm引入： npm install echarts npm install echarts-liquidfillcdn引入： <script src='echarts.js'></script> <script src='echarts-liquidfill.js'></script>

2、使用 echarts 3D 的時候，同時也注意下版本匹配，echarts-gl@2 版本匹配 echarts@5 版本，echarts-gl@1 版本匹配 echarts@4 版本

四、各種 echarts 圖表（含代碼）

1、水球圖

注意：除了需要 echarts，還要 echarts-liquidfil 配合

<template><div class="wrap-container"><div class="wp-content"><div class="wp-title">水球圖</div><div class="wp-body"><div class="wrap-container"><div class="chartsdom" id='chart-polo'></div></div></div></div></div> </template><script>// 注意 echartsLiquidfill ver3對應echarts 版本 5；（echartsLiquidfill ver2對應echarts 版本 4）// eslint-disable-next-lineimport echartsLiquidfill from "echarts-liquidfill";export default {name: 'water-polo',data() {return {option: null}},mounted() {this.getEchart()},methods: {getEchart() {// 獲取渲染元素，創建 chartlet myChart = this.$echarts.init(document.getElementById('chart-polo'))this.option = {series: [{// 水球圖類型type: 'liquidFill',// 名稱name: "測試",// 水波值，可多個data: [0.75],// 球相對渲染元素的寬高的半徑比radius: '75%',// 水波顏色color: ['#00B9F5'],// 水波背景的樣式backgroundStyle: {// 背景顏色color: 'rgba(0,0,0,0.5)',// 邊框顏色borderColor: '#007bff',// 邊框寬度borderWidth: 3,shadowColor: 'rgba(0,123,225,.4)',shadowBlur: 20},// 是否顯示外輪廓outline: {show: true},}],// 鼠標進入是否顯示提示tooltip:{show: true}}myChart.setOption(this.option, true)window.addEventListener('resize', () => {myChart.resize()})// 第二種 水球圖// const dataOption = {// value: 0.30,// itemStyle: { //漸變水球顏色// color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{// offset: 0,// color: "pink",// },// {// offset: 1,// color: "skyblue",// },// ]),// },// };// this.option = {// series: [{// type: "liquidFill",// // 這三個屬性值設置為false靜止的波浪// // waveAnimation: false, //靜止的波浪效果// animationDuration: 1000, // 波浪初始上漲時間// // eslint-disable-next-line// // animationDurationUpdate: 0,//靜止的波浪效果// // 這三個屬性值設置為false靜止的波浪// amplitude: "5%", //振幅波浪大小// name: "一級預警",// data: [dataOption],// waveLength: "60%", //波浪長度// // eslint-disable-next-line// outline: {// //隱藏輪廓// show: false,// },// label: {// //字體內容、字體顏色、字體大小屬性// formatter: "測試",// color: "#fff",// fontSize: 30,// },// backgroundStyle: {// //水球圖背景// color: "#101fff",// },// // color: ["#F87900"],// }, ],// tooltip: {// //鼠標滑過展示數據// show: true,// },// };// myChart.setOption(this.option);}}} </script><style lang="scss" scoped>.wp-title{text-align: center;color: white;}.wrap-container {width: 400px;height: 400px;.chartsdom {width: 100%;height: 100%;}} </style>

2、滾動弧線圖

?

<template><div class="wrap-container ra-container"><div class="ra-content"><div class="ra-title">滾動弧線圖</div><div class="ra-body"><div class="wrap-container"><div class="chartsdom" id='chart-rollArc'></div></div></div></div></div> </template><script>export default {name: 'roll-arcline',data() {return {option: null,xIndex: 0,timer: null,xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],yData: [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98]}},mounted() {this.getEchart()},methods: {getEchart() {// 圖標渲染體const chartRollArc = document.getElementById('chart-rollArc')// 初始化圖表let myChart = this.$echarts.init(chartRollArc)this.option = {tooltip: {trigger: 'axis',showContent: true,axiosPointer: {type: 'shadow',shadowStyle: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: '#5d83ff'},{offset: 0,color: 'rgba(255,255,255,0)'}])}},// 重新構造圖標信息顯示（不寫會有默認的格式）formatter: (params) => {// console.log(params)params = params[0]if (params.seriesIndex === 0)// console.log(' origin '+ this.xIndex)this.xIndex = parseInt(params.name) - 1// console.log(' fuzhi '+ this.xIndex)return params.name + '月</br>' + params.seriesName + '：' + params.value + ' 人'},},color: ['#5d83ff'],grid: {top: 30,left: 30,right: 20,bottom: 20,containerLabel: true},xAxis: {type: 'category',data: this.xData,boundaryGap: false,axisTick: {show: false},axisLabel: {formatter: '{value} 月'},axisLine: {lineStyle: {color: '#999'}}},yAxis: {type: 'value',axisLine: {show: false,lineStyle: {color: '#999'}},},series: [{name: '人數',type: 'line',data: this.yData,symbolSize: 10,itemStyle: {opacity: 0,},emphasis: {label: {show: true,color: '#fff',fontSize: 20},itemStyle: {color: '#5d83ff',borderColor: '#fff',borderWidth: 2,opacity: 1},},areaStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#5d83ff'}, {offset: 1,color: 'rgba(0, 0, 0, 0)'}]),}},smooth: true,}]}// 繪制圖表myChart.setOption(this.option, true);// 監聽窗口變化window.addEventListener('resize', () => {myChart.resize();});// 開啟自動顯示信息this.startChartAutoShowTip(myChart)// 鼠標進入停止自動顯示信息chartRollArc.onmouseover = () => {// console.log('mouseover')// alert('mouseover')this.stopChartAutoShowTip()}// 退出 chartRollArc 繼續自動顯示信息chartRollArc.onmouseout = () => {// console.log('mouseout')// alert('mouseout')this.startChartAutoShowTip(myChart);}},/*** 自動顯示圖標信息函數* @param {Object} myChart*/startChartAutoShowTip(myChart) {this.stopChartAutoShowTip()this.timer = setInterval(() => {// 顯示圖標信息myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: this.xIndex});this.xIndex++;// console.log(this.xIndex)if (this.xIndex > this.yData.length) {this.xIndex = 0;}}, 1000);},/*** 停止自動顯示圖標信息函數*/stopChartAutoShowTip() {if (this.timer != null) {clearInterval(this.timer)this.timer = null}}},beforeDestroy() {// 銷毀自動顯示信息this.stopChartAutoShowTip()}} </script><style lang='scss' scoped>/* 標題居中 */.ra-title {text-align: center;color: white;}/* 內容寬高 */.wrap-container {width: 895px;height: 400px;.chartsdom {width: 100%;height: 90%;}} </style>

3、旋轉餅狀圖

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">旋轉的餅狀圖</div><div class="sn-body"><div class="wrap-container"><div class="pie"><div class="pies pie1"></div><div class="pies pie2"></div><div class="pies pie3"></div><div class="pie4"></div><div class="chartsdom" id='chart-pie'></div></div></div></div></div></div> </template><script>export default {name: 'rotate-pie',data() {return {}},mounted() {this.getEchart()},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-pie'));this.option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} (ozvdkddzhkzd%)',},legend: {show: true,orient: 'vertical',left: 'center',top: 'middle',data: ['內存', '存儲'],textStyle: {color: '#4ce5ff',fontSize: 14,},itemWidth: 20,itemHeight: 10},label: {normal: {show: false},},labelLine: {normal: {show: false}},series: [{name: '磁盤空間',type: 'pie',radius: [60, 110],center: ['50%', '50%'],roseType: 'area',label: {show: false},emphasis: {label: {show: false}},data: [{value: 6.5,name: '內存',itemStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#387ed3'}, {offset: 1,color: '#bc8b68'}])}}}, {value: 3.5,name: '存儲',itemStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#188bfd'}, {offset: 1,color: '#51eeff'}])}}}, {value: 3,name: '其他',itemStyle: {normal: {color: 'rgba(0, 0, 106, 1)'}}}, {value: 0,name: '其他1',itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}}, {value: 0,name: '其他2',itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}}, {value: 0,name: '其他3',itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}}]}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});}}} </script> <style lang="scss" scoped>.sn-title {text-align: center;color: white;}.sn-container{border:5px solid aqua;border-radius: 25px;}.wrap-container {background: 'rgba(1,1,1,0)';width: 432px;height: 400px;.chartsdom {width: 100%;height: 100%;}.pie {position: relative;top: 0;width: 100%;height: 100%;.pies {width: 100%;height: 100%;top: 0;left: 0;position: absolute;background-repeat: no-repeat;background-position: center center;}.pie1 {background-image: url(../../assets/img/whcircle.png);animation: mymove 20s linear infinite;-webkit-animation: mymove 20s linear infinite;}.pie2 {background-image: url(../../assets/img/circle2.png);animation: moveto 20s linear infinite;-webkit-animation: moveto 20s linear infinite;}.pie3 {background-image: url(../../assets/img/inner.png);}// 分割線 內存/存儲.pie4 {position: absolute;top: 50%;left: 36%;width: 76px;height: 1px;background: linear-gradient(to right, rgb(31, 38, 103), rgb(90, 250, 253), rgb(31, 38, 103));}}}/*** animation 動畫*/@-webkit-keyframes mymove {0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg)}100%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes mymove{0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@-webkit-keyframes moveto {0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg)}100%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}@keyframes moveto{0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}} </style>

4、環狀餅圖

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">環形餅圖</div><div class="sn-body"><div class="wrap-container ring-pie"><div class="back-chart"><svg width="100%" height="100%" viewBox="0 0 150 150" version="1.1"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="svg_2"d="m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z"stroke="#2de6af" fill-opacity="null" fill="none"></path></svg></div><div class="chartsdom" id="chart_rp"></div><div class="arrow-cir1"><div class="arrow-cir11"></div></div><div class="arrow-cir2"><div class=" arrow-cir22"></div></div></div></div></div></div> </template><script>export default {name: 'ring-pie',mounted() {this.getEchart();},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart_rp'));this.option = {tooltip:{show:true},series: [{name: '環形餅圖',type: 'pie',radius: ['68%', '80%'],hoverAnimation: true,avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true}},labelLine: {show: true},data: [{value: 6,name: '區塊鏈',itemStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#6984fe'}, {offset: 1,color: '#24d1fd'}])}}}, {value: 4,name: '大數據',itemStyle: {normal: {color: '#ee2'}}}]}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});}},} </script><style lang="scss" scoped>.sn-title {text-align: center;color: white;}.sn-container {width: 432px;height: 400px;border: 5px solid aqua;border-radius: 25px;}.wrap-container {position: relative;width: 432px;height: 400px;.back-chart {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 300px;height: 300px;background: url(../../assets/img/back_chart.png) no-repeat center;}.chartsdom {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 300px;height: 300px;z-index: 9999;}.arrow-cir1 {// border: 5px solid red;// border-radius: 25px;width: 300px;height: 300px;offset-distance: 0%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;-webkit-animation: arrow-cir1 5s linear infinite;animation: arrow-cir1 5s linear infinite;.arrow-cir11 {position: absolute;width: 15px;height: 15px;top: 0.5%;left: 50%;background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;background-color: blue;}}.arrow-cir2 {// border: 5px solid red;// border-radius: 25px;width: 300px;height: 300px;offset-distance: 0%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;-webkit-animation: arrow-cir2 5s linear infinite;animation: arrow-cir2 5s linear infinite;.arrow-cir22 {position: absolute;width: 15px;height: 15px;top: 0.5%;left: 50%;background: url(../../assets/img/icon_04.png) no-repeat 50% 50%;background-color: yellow;}}}@-webkit-keyframes arrow-cir1{0%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg)}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(360deg);transform: rotate(360deg);} }@keyframes arrow-cir1{0%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg)}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(360deg);transform: rotate(360deg);} }@-webkit-keyframes arrow-cir2{0%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg)}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(-360deg);transform: rotate(-360deg);} }@keyframes arrow-cir2{0%{-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(0deg);transform: rotate(0deg)}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(-360deg);transform: rotate(-360deg);} } </style>

?5、彩虹餅狀圖

?

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">彩虹餅狀圖</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-rainbow'></div><div class="preinfo" v-for='(item,ind) in arrData' :key='ind' :class="`preinfo${ind}`"><span>{{ item.percent }}%</span><span>{{ item.name }}</span></div><div class="preinfos" :class="`pre${i}`" v-for="(v, i) in arrData" :key='i'><span></span><span></span></div></div></div></div></div> </template><script>export default {name: 'ranbow-pies',data() {return {option: null,arrData: [{name: '食品類',percent: 73}, {name: '工業類',percent: 20}, {name: '醫療類',percent: 32}, {name: '政務類',percent: 60}, {name: '金融類',percent: 14}]}},mounted() {this.getEchart();},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-rainbow'));let itemStyle = {normal: {color: 'rgba(0, 0, 0, 0)',}}this.option = {color: ['#125ec1', '#3fa5c0', '#d68639', '#ad5b68', '#6082a5'],series: [{name: '金融類',type: 'pie',clockWise: false,startAngle: 90,hoverAnimation: false,radius: ['85%', '90%'],center: ['50%', '50%'],label: {normal: {show: false},},labelLine: {normal: {show: false}},itemStyle: {shadowColor: '#125ec1',shadowBlur: 15},data: [{value: 15,name: '15%',itemStyle: {normal: {color: '#125ec1'}}}, {value: 85,name: '50%',itemStyle: itemStyle}]}, {name: '政務類',type: 'pie',clockWise: false,startAngle: 90,hoverAnimation: false,radius: ['72%', '77%'],center: ['50%', '50%'],label: {normal: {show: false},},labelLine: {normal: {show: false}},itemStyle: {shadowColor: '#3fa5c0',shadowBlur: 15},data: [{value: 60,name: '60%',itemStyle: {normal: {color: '#3fa5c0'}}}, {value: 40,name: '40%',itemStyle: itemStyle}]}, {name: '醫療類',type: 'pie',clockWise: false,startAngle: 90,hoverAnimation: false,radius: ['59%', '64%'],center: ['50%', '50%'],label: {normal: {show: false},},labelLine: {normal: {show: false}},itemStyle: {shadowColor: '#d68639',shadowBlur: 15},data: [{value: 32,name: '32%',itemStyle: {normal: {color: '#d68639'}}}, {value: 68,name: '68%',itemStyle: itemStyle}]}, {name: '工業類',type: 'pie',clockWise: false,startAngle: 90,hoverAnimation: false,radius: ['46%', '51%'],center: ['50%', '50%'],label: {normal: {show: false},},labelLine: {normal: {show: false}},itemStyle: {shadowColor: '#ad5b68',shadowBlur: 15},data: [{value: 20,name: '20%',itemStyle: {normal: {color: '#ad5b68'}}}, {value: 80,name: '80%',itemStyle: itemStyle}]}, {name: '食品類',type: 'pie',clockWise: false,startAngle: 90,hoverAnimation: false,radius: ['33%', '38%'],center: ['50%', '50%'],label: {normal: {show: false},},labelLine: {normal: {show: false}},itemStyle: {shadowColor: '#6082a5',shadowBlur: 15},data: [{value: 73,name: '73%',itemStyle: {normal: {color: '#6082a5'}}}, {value: 27,name: '27%',itemStyle: itemStyle}]}]}// 使用制定的配置項和數據顯示圖表myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});}},} </script><style lang="scss" scoped>.sn-title {text-align: center;color: white;}.sn-container {border: 5px solid aqua;border-radius: 25px;}.wrap-container {position: relative;width: 432px;height: 400px;.chartsdom {width: 100%;height: 100%;}.preinfo {position: absolute;left: 68%;top: 5%;margin-left: -2.5em;-webkit-transform: translate(0%, -50%);-moz-transform: translate(0%, -50%);-ms-transform: translate(0%, -50%);-o-transform: translate(0%, -50%);transform: translate(0%, -50%);white-space: nowrap;font-size: 13px;span {&:nth-child(1) {margin-right: 10px;}}&.preinfo0 {color: rgb(99, 139, 176);margin-top: 25%;}&.preinfo1 {color: rgb(180, 91, 111);margin-top: 19%;}&.preinfo2 {color: rgb(232, 138, 50);margin-top: 13%;}&.preinfo3 {color: rgb(70, 179, 200);margin-top: 7%;}&.preinfo4 {color: rgb(19, 98, 201);margin-top: 1%;}}.preinfos {position: absolute;left: 50%;top: 50%;width: 1px;height: 58px;background-color: rgb(99, 139, 176);-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;-ms-transform-origin: 50% 0;-o-transform-origin: 50% 0;transform-origin: 50% 0;span {&:nth-child(1) {width: 8px;height: 8px;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;position: absolute;left: -3px;top: 50%;}&:nth-child(2) {width: 0;height: 0;border-width: 12px 5px 5px 5px;border-style: solid;position: absolute;left: -5px;top: 100%;}}&.pre0 {height: 55px;background-color: rgb(99, 139, 176);transform: rotate(-62.614deg);span {&:nth-child(1) {background-color: rgb(99, 139, 176);} &:nth-child(2) {border-color: rgb(99, 139, 176) transparent transparent;}}}&.pre1 {height: 85px;background-color: rgb(180, 91, 111);transform: rotate(125.593deg);span {&:nth-child(1) {background-color: rgb(180, 91, 111);}&:nth-child(2) {border-color: rgb(180, 91, 111) transparent transparent;}}}&.pre2 {height: 109px;background-color: rgb(232, 138, 50);transform: rotate(86.2006deg);span {&:nth-child(1) {background-color: rgb(232, 138, 50);}&:nth-child(2) {border-color: rgb(232, 138, 50) transparent transparent;}}}&.pre3 {height: 131px;background-color: rgb(70, 179, 200);transform: rotate(-18.845deg);span {&:nth-child(1) {background-color: rgb(70, 179, 200);}&:nth-child(2) {border-color: rgb(70, 179, 200) transparent transparent;}}}&.pre4 {height: 158px;background-color: rgb(19, 98, 201);transform: rotate(149.666deg);span {&:nth-child(1) {background-color: rgb(19, 98, 201);}&:nth-child(2) {border-color: rgb(19, 98, 201) transparent transparent;}}}}} </style>

?6、動態柱狀圖

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">動態柱狀圖</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-dynamic-bar'></div></div></div></div></div> </template><script>export default {name: 'dynamic-bar',data() {return {option: null,dataMap: {}}},mounted() {this.getEchart();},methods: {dataFormatter(obj) {let pList = ['長沙', '湘潭', '株洲', '岳陽', '邵陽', '衡陽', '益陽', '婁底', '懷化', '湘西', '張家界', '郴州', '常德', '永州'];let temp;for (let x = 0; x < 3; x++) {let max = 0;let sum = 0;temp = obj[x];for (let i = 0, l = temp.length; i < l; i++) {max = Math.max(max, temp[i]);sum += temp[i];obj[x][i] = {name: pList[i],value: temp[i]};}obj[x + 'max'] = Math.floor(max / 100) * 100;obj[x + 'sum'] = sum;}return obj;},getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-dynamic-bar'));let itemStyle = {barBorderRadius: [15, 0],color: '#0084ff'}this.dataMap.dataType = this.dataFormatter({2: [124, 145, 261, 54, 195, 131, 150, 39, 11, 40, 23, 51, 45, 88],1: [136, 159, 205, 41, 306, 7, 77, 101, 24, 34, 8, 15, 14, 9],0: [118, 128, 220, 47, 92, 14, 9, 11, 113, 61, 11, 22, 33, 5],});console.log("this.dataMap.dataType", this.dataMap.dataType)this.option = {baseOption: {timeline: {axisType: 'category',autoPlay: true,playInterval: 1000,data: ['一類', '二類', '三類'],left: 80,right: 80,bottom: 30,lineStyle: {color: '#179bf1'},label: {color: '#fff'},checkpointStyle: {color: '#01d8ff',symbolSize: 10,borderColor: 'rgba(1, 216, 255, 0.5)',borderWidth: 5,},controlStyle: {show: false,},itemStyle: {borderColor: '#004b85',borderWidth: 1,shadowColor: 'rgba(1, 216, 225, 0.5)',shadowBlur: 5},emphasis: {label: {color: '#01d8ff',show: false},checkpointStyle: {color: '#01d8ff',borderColor: 'rgba(1, 216, 255, 0.5)',borderWidth: 5,},itemStyle: {color: '#01d8ff',borderColor: 'rgba(1, 216, 225, 0.5)',borderWidth: 5}}},calculable: true,grid: {top: '10%',bottom: '35%'},xAxis: [{type: 'category',axisLabel: {interval: 0},data: ['長沙', '湘潭', '株洲', '岳陽', '邵陽', '衡陽', '益陽', '婁底', '懷化', '湘西', '張家界', '郴州','常德', '永州'],splitLine: {show: false},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#2867a8',}},}],yAxis: [{type: 'value',name: '家',splitLine: {show: false},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#2867a8'}}}],series: [{name: '一類',type: 'bar',barWidth: 15,legendHoverLink: true,label: {show: true,position: 'top',color: '#fff'},}]},options: [{series: [{data: this.dataMap.dataType['0'],itemStyle: itemStyle}]}, {series: [{data: this.dataMap.dataType['1'],itemStyle: itemStyle}]}, {series: [{data: this.dataMap.dataType['2'],itemStyle: itemStyle}]}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});}}} </script><style lang='scss' scoped>.sn-title{text-align: center;color: white;}.sn-container{border: 5px solid aqua;border-radius: 20px;}.wrap-container{width: 586px;height: 400px;.chartsdom{width: 100%;height: 100%;}} </style>

7、儀表盤

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">儀表盤</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-gauge'></div></div></div></div></div> </template><script>export default {name: 'gauge-chart',data() {return {option: null,timer: null}},mounted() {this.getEchart()},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-gauge'))this.option = {tooltip: {formatter: '{a} <br/>{c} {b}'},series: [{name: '速度',type: 'gauge',min: 0,max: 220,splitNumber: 11,// radius: '50%',axisLine: { // 坐標軸線lineStyle: { // 屬性lineStyle控制線條樣式color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],width: 3,// shadowColor: '#fff', //默認透明shadowBlur: 10}},axisLabel: { // 坐標軸小標記fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默認透明shadowBlur: 10},axisTick: { // 坐標軸小標記length: 15, // 屬性length控制線長lineStyle: { // 屬性lineStyle控制線條樣式color: 'auto',// shadowColor: '#fff', //默認透明shadowBlur: 10}},splitLine: { // 分隔線length: 25, // 屬性length控制線長lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式width: 3,color: '#fff',// shadowColor: '#fff', //默認透明shadowBlur: 10}},pointer: { // 分隔線// shadowColor: '#fff', //默認透明shadowBlur: 5},title: {textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: 'bolder',fontSize: 20,fontStyle: 'italic',color: '#fff',shadowColor: '#fff', //默認透明shadowBlur: 10}},detail: {// backgroundColor: 'rgba(30,144,255,0.8)',// borderWidth: 1,// borderColor: '#fff',// shadowColor: '#fff', //默認透明// shadowBlur: 5,offsetCenter: [0, '50%'], // x, y，單位pxtextStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLEfontWeight: 'bolder',fontSize: 25,color: '#fff'}},data: [{value: 40,name: 'km/h'}]}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});this.timer = setInterval(()=>{this.option.series[0].data[0].value = (Math.random()*200).toFixed(2) -0myChart.setOption(this.option, true)},1000)}},beforeDestroy() {clearInterval(this.timer);}} </script><style lang="scss" scoped>.sn-title{text-align: center;color: white;}.wrap-container{width: 432px;height: 400px;.chartsdom{width: 100%;height: 100%;}} </style>

8、動態折線圖

?

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">動態折線圖</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-dynamic-line'></div></div></div></div></div> </template><script>export default {name: 'dynamic-line',data() {return {option: null,timer: null,xData: [],now: new Date(2019, 1, 1),value: Math.random() * 1000,oneDay: 24 * 3600 * 1000}},mounted() {this.getEchart();},methods: {randomData() {this.now = new Date(+this.now + this.oneDay)this.value = this.value + Math.random() * 25 - 10return {name: this.now.toString(),value: [[this.now.getFullYear(), this.now.getMonth() , this.now.getDate()].join('/'),Math.round(this.value)]}},getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-dynamic-line'));for (let i = 0; i < 1000; i++) {this.xData.push(this.randomData());}this.option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',axisPointer: {type: 'cross',label: {backgroundColor: '#283b56'}}}},grid: {top: '15%',left: '10%',right: '12%',bottom: '15%',containLabel: true},color: ['#b54c5d'],calculable: true,xAxis: {type: 'time',name: '年-月-日',boundaryGap: false,splitNumber: 5,axisLabel: {formatter(value) {let date = new Date(value);return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();}},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#0084ff'}},splitLine: {show: false}},yAxis: {type: 'value',scale: true,name: '比特幣（美元）',min: 0,boundaryGap: false,axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#0084ff'}},splitLine: {show: false},},series: [{name: '實時交易',type: 'line',xAxisIndex: 0,yAxisIndex: 0,itemStyle: {opacity: 0,},data: this.xData,smooth: true}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});this.timer = setInterval(() => {for (let i = 0; i < 5; i++){this.xData.shift();this.xData.push(this.randomData());}myChart.setOption(this.option, true);},200)}},beforeDestroy() {clearInterval(this.timer);}} </script><style lang="scss" scoped>.sn-title{text-align: center;color: white;}.wrap-container{width: 586px;height: 400px;.chartsdom{width: 100%;height: 100%;}} </style>

9、雷達圖

?

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">雷達圖</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-radar'></div></div></div></div></div> </template><script>export default {name: 'radar-chart',data() {return {Option: null,timer: null}},mounted() {this.getEchart()},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-radar'))this.option = {tooltip: {trigger: 'axis'},radar: [{indicator: [{text: '外觀',max: 100},{text: '拍照',max: 100},{text: '系統',max: 100},{text: '性能',max: 100},{text: '屏幕',max: 100},{text: '折疊',max: 100},],radius: '75%',center: ['50%', '50%'],name: {textStyle: {color: '#1883ff'}},axisTick: {show: false},axisLabel: {show: false},axisLine: {show: true,symbol: 'arrow',symbolSize: [5, 7.5],lineStyle: {color: '#1883ff',type: 'dashed'}},splitArea: {show: false},splitLine: {show: false}}],series: [{type: 'radar',areaStyle: {},symbol: 'none',itemStyle: {normal: {areaStyle: {type: 'default'}}},lineStyle: {opacity: 0,},data: [{value: [75, 50, 30, 90, 40, 45],name: '智能手機',itemStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#9c6b4e'}, {offset: 1,color: '#2a59ac'}]),lineStyle: {color: '#2a59ac'}}}},// {// value: [70, 40, 55, 55, 30, 55],// name: '5G手機',// itemStyle: {// normal: {// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{// offset: 0,// color: '#0855ca'// }, {// offset: 1,// color: '#36a6c7'// }]),// lineStyle: {// color: '#36a6c7'// }// }// }// }]}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});this.timer = setInterval(()=>{let valueArr = this.option.series[0].data[0].valuefor (var i = 0; i < valueArr.length; i++) {valueArr[i] = parseInt((Math.random()*100))}this.option.series[0].data[0].value = valueArrmyChart.setOption(this.option, true)},1000)}},beforeDestroy(){clearInterval(this.timer)}} </script><style lang="scss" scoped>.sn-container{text-align: center;color: white;}.wrap-container {width: 432px;height: 400px;.chartsdom {width: 100%;height: 100%;}} </style>

10、柱狀圖和餅圖聯動

?

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">柱狀和餅狀圖聯動</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-bar-pie'></div></div></div></div></div> </template><script>export default {name: 'union-bar-pie',data() {return {option: null,dataMap: {}}},mounted() {this.getEchart()},methods: {dataFormatter(obj) {let pList = ['金融類', '政務類', '醫療類', '互聯網類']let tempfor (let y = 2016; y <= 2020; y++) {let max = 0;let sum = 0;temp = obj[y];for (let i = 0, l = temp.length; i < l; i++) {max = Math.max(max, temp[i]);sum += temp[i];obj[y][i] = {name: pList[i],value: temp[i]};}obj[y + 'max'] = Math.floor(max / 100) * 100;obj[y + 'sum'] = sum;}return obj;},getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-bar-pie'));let itemStyleJR = {color: '#d6d638'}let itemStyleZW = {color: '#00c86c'}let itemStyleYL = {color: '#07d8ff'}let itemStyleIT = {color: '#0c71cf'}this.dataMap.dataJR = this.dataFormatter({//max : 4000,2020: [136, 159, 905, 305],2019: [124, 145, 562, 285],2018: [118, 128, 207, 265],2017: [112, 122, 234, 245],2016: [101, 110, 804, 225]});this.dataMap.dataZW = this.dataFormatter({//max : 26600,2020: [752, 928, 126, 210],2019: [388, 840, 707, 208],2018: [855, 987, 959, 207],2017: [626, 709, 701, 206],2016: [509, 892, 201, 205]});this.dataMap.dataYL = this.dataFormatter({//max : 25000,2020: [363, 219, 483, 505],2019: [600, 438, 123, 405],2018: [179, 405, 668, 305],2017: [375, 2886, 276, 205],2016: [236, 250, 408, 105]});this.dataMap.dataIT = this.dataFormatter({//max : 26600,2020: [752, 928, 126, 255],2019: [388, 840, 707, 245],2018: [855, 987, 959, 235],2017: [626, 709, 701, 225],2016: [509, 892, 201, 215]});this.option = {baseOption: {timeline: {axisType: 'category',autoPlay: true,playInterval: 2000,data: ['2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01', '2020-01-01'],lineStyle: {color: '#179bf1'},left: 30,right: 30,bottom: 30,label: {color: '#2867a8',formatter(s) {return (new Date(s)).getFullYear();}},checkpointStyle: {color: '#01d8ff',symbolSize: 10,borderColor: 'rgba(1, 216, 255, 0.5)',borderWidth: 5,},controlStyle: {showPlayBtn: false,borderColor: '#01bde6',itemGap: 20},itemStyle: {// color: '#004b85',borderColor: '#004b85',borderWidth: 1,shadowColor: 'rgba(1, 216, 225, 0.5)',shadowBlur: 5},emphasis: {label: {color: '#01d8ff',show: false},checkpointStyle: {color: '#01d8ff',borderColor: 'rgba(1, 216, 255, 0.5)',borderWidth: 5,},controlStyle: {borderColor: 'rgba(1, 216, 255, 0.5)'},itemStyle: {color: '#01d8ff',borderColor: 'rgba(1, 216, 225, 0.5)',borderWidth: 5}}},// tooltip: {// trigger: 'item'// },grid: {bottom: '30%',right: "42%"},calculable: true,xAxis: [{type: 'category',data: ['金融類', '政務類', '醫療類', '互聯網類'],splitLine: {show: false},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#0084ff',}},}],yAxis: [{type: 'value',name: '區塊鏈應用（個）',splitLine: {show: false},axisTick: {show: false},axisLine: {show: true,lineStyle: {color: '#0084ff'}},}],series: [{name: '聯盟鏈',type: 'bar',barMaxWidth: 15,center: ['20%', '65%'],seriesLayoutBy: 'row',markPoint: {symbol: 'pin',itemStyle: {normal: {color: '#eb9b44',shadowColor: '#eb9b44',shadowBlur: 15}},data: [{type: 'max',name: '最大值'},{type: 'min',name: '最小值'}]}// label: {// show: true,// position: 'top'// },},{name: '應用占比',type: 'pie',center: ['76%', '20%'],radius: '28%',z: 100}]},options: [{series: [{data: [{name: '金融類',value: this.dataMap.dataJR['2016sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2016sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2016sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2016sum'],itemStyle: itemStyleIT}],},{data: [{name: '金融類',value: this.dataMap.dataJR['2016sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2016sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2016sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2016sum'],itemStyle: itemStyleIT}]}]},{series: [{data: [{name: '金融類',value: this.dataMap.dataJR['2017sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2017sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2017sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2017sum'],itemStyle: itemStyleIT}],},{data: [{name: '金融類',value: this.dataMap.dataJR['2017sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2017sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2017sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2017sum'],itemStyle: itemStyleIT}]}]},{series: [{data: [{name: '金融類',value: this.dataMap.dataJR['2018sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2018sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2018sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2018sum'],itemStyle: itemStyleIT}]},{data: [{name: '金融類',value: this.dataMap.dataJR['2018sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2018sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2018sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2018sum'],itemStyle: itemStyleIT}]}]},{series: [{data: [{name: '金融類',value: this.dataMap.dataJR['2019sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2019sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2019sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2019sum'],itemStyle: itemStyleIT}]},{data: [{name: '金融類',value: this.dataMap.dataJR['2019sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2019sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2019sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2019sum'],itemStyle: itemStyleIT}]}]},{series: [{data: [{name: '金融類',value: this.dataMap.dataJR['2020sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2020sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2020sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2020sum'],itemStyle: itemStyleIT}]},{data: [{name: '金融類',value: this.dataMap.dataJR['2020sum'],itemStyle: itemStyleJR}, {name: '政務類',value: this.dataMap.dataZW['2020sum'],itemStyle: itemStyleZW}, {name: '醫療類',value: this.dataMap.dataYL['2020sum'],itemStyle: itemStyleYL}, {name: '互聯網類',value: this.dataMap.dataIT['2020sum'],itemStyle: itemStyleIT}]}]}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});}}} </script><style lang="scss" scoped>.sn-title {text-align: center;color: white;}.wrap-container {width: 586px;height: 400px;.chartsdom {width: 100%;height: 100%;}} </style>

11、3D 柱狀圖

?

<template><div class="wrap-container trigle"><div class="sn-content"><div class="sn-title">3D柱狀圖</div><div class="sn-body"><div class="wrap-container"><div class="bar bar-img"></div><div class="bar bar-img1"></div><div class="bar bar-img2"></div><div class="chartsdom" id='chart-3d-bar'></div></div></div></div></div> </template><script>import 'echarts-gl'export default {name: 'three-d-bar',data() {return {option: null}},mounted() {this.getEchart()},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-3d-bar'));let xData = ['20-25', '25-30', '30-35', '35-40', '40-45', '45-50'];let days = ['1', '2', '3', '4', '5', '6'];let sex = ['女', '男'];let data = [[0, 0, 3, sex[0], xData[0], 500, 25],[0, 1, 2.5, sex[0], xData[3], 1000, 35],[0, 2, 1.5, sex[1], xData[4], 3000, 5],[0, 3, 1, sex[1], xData[1], 300, 15],[0, 4, 2, sex[0], xData[2], 500, 55],[0, 5, 3, sex[0], xData[3], 1500, 45],[1, 5, 6, sex[1], xData[0], 300, 25],[1, 1, 4, sex[0], xData[1], 500, 22],[1, 2, 2, sex[0], xData[2], 1500, 38],[1, 3, 1.5, sex[1], xData[3], 2500, 25],[1, 4, 3, sex[0], xData[4], 3500, 49],[1, 0, 4, sex[1], xData[5], 5500, 15],[2, 2, 3, sex[1], xData[0], 300, 25],[2, 1, 2, sex[0], xData[4], 1300, 25],[2, 2, 5, sex[0], xData[2], 900, 25],[2, 5, 1, sex[1], xData[3], 2000, 25],[2, 0, 3, sex[1], xData[1], 2300, 25],[2, 0, 10, sex[1], xData[5], 3500, 25],[3, 2, 3, sex[0], xData[5], 500, 35],[3, 3, 2, sex[0], xData[4], 2300, 55],[3, 2, 1, sex[1], xData[3], 3300, 15],[3, 5, 5, sex[1], xData[2], 500, 10],[3, 1, 2, sex[1], xData[1], 1000, 35],[3, 0, 1, sex[0], xData[0], 300, 45],[4, 2, 3, sex[1], xData[1], 600, 25],[4, 0, 5, sex[0], xData[0], 500, 15],[4, 1, 3.5, sex[1], xData[3], 4000, 5],[4, 4, 7, sex[0], xData[0], 300, 75],[4, 1, 0, sex[1], xData[5], 3000, 85],[3, 1, 3, sex[0], xData[2], 2500, 65],[5, 2, 3, sex[0], xData[2], 500, 15],[5, 1, 2, sex[1], xData[3], 3300, 52],[5, 1, 5, sex[0], xData[4], 1000, 88],[5, 5, 8, sex[1], xData[0], 200, 12],[5, 2, 7, sex[0], xData[0], 300, 45],[3, 2, 2, sex[1], xData[1], 5000, 51]];this.option = {tooltip: {borderColor: '#8a704e',borderWidth: 1,padding: 15,formatter: (params) => {let html =`${params.seriesName} <br><span style="color: #f00;"> 性別：${params.value[3]} <br> 年齡：${params.value[4]}歲<br> 貸款金額：${params.value[5]} <br> 總人數：${params.value[6]}</span>`;return html;},textStyle: {color: '#8a704e',fontSize: 16}},xAxis3D: {type: 'category',data: xData},yAxis3D: {type: 'category',data: days},zAxis3D: {type: 'value'},grid3D: {show: true,boxWidth: 160,boxDepth: 80,viewControl: {alpha: 10,beta: 15}},series: [{type: 'bar3D',name: '當前值',// data: data,data: data.map((item) => {return {value: [item[1], item[0], item[2], item[3], item[4], item[5], item[6]],}}),shading: 'lambert',label: {show: false},itemStyle: {color: '#0084ff',opacity: 0.8},emphasis: {label: {show: false},itemStyle: {color: '#00eeff'}}}]}myChart.setOption(this.option, true);window.addEventListener('resize', () => {myChart.resize();});}}} </script><style lang="scss" scoped>.sn-title{text-align: center;color: white;}.wrap-container{position: relative;width: 620px;height: 400px;.chartsdom{width: 100%;height: 100%;}.bar{width: 100%;height: 100%;position: absolute;&.bar-img{bottom: 5%;background: url(../../assets/img/bk_circle.png) no-repeat center 97%;background-size: 100%;filter:hue-rotate(180deg)}&.bar-img1{bottom: 35%;background: url(../../assets/img/bk_circle1.png) no-repeat center 97%;background-size: 75%;filter: hue-rotate(180deg);}&.bar-img2 {bottom: 60%;background: url(../../assets/img/bk_circle2.png) no-repeat center 97%;background-size: 50%;filter: hue-rotate(180deg);}}} </style>

12、彩色餅狀圖組合

?

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">彩色餅狀圖組合</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-colorful-pies'></div></div></div></div></div> </template><script>export default {name: 'colorful-pies',mounted() {this.getEchart()},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-colorful-pies'))let option = {color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],tooltip: {trigger: 'item',formatter: '{b} : {c} (ozvdkddzhkzd%)'},polar: {},angleAxis: {interval: 1,type: 'category',data: [],z: 10,axisLine: {show: false,lineStyle: {color: '#0B4A6B',width: 5,type: 'solid'},},axisLabel: {interval: 0,show: true,color: '#0B4A6B',margin: 8,fontSize: 16},},radiusAxis: {min: 40,max: 120,interval: 15,axisLine: {show: false,lineStyle: {color: '#0B3E5E',width: 1,type: 'solid'},},axisLabel: {formatter: '{value} %',show: false,padding: [0, 0, 20, 0],color: '#0B3E5E',fontSize: 16},splitLine: {lineStyle: {color: '#0B3E5E',width: 2,type: "solid"}}},calculable: true,series: [{type: 'pie',radius: ['6%', '10%'],hoverAnimation: false,labelLine: {normal: {show: false,length: 30,length2: 50},emphasis: {show: false}},tooltip: {show: false},data: [{name: '',value: 0,itemStyle: {normal: {color: '#004A6B'}}}]},{type: 'pie',radius: ['70%', '75%'],hoverAnimation: false,labelLine: {normal: {show: false,length: 30,length2: 50},emphasis: {show: false}},tooltip: {show: false},data: [{name: '',value: 0,itemStyle: {normal: {color: '#004A6B'}}}]},{stack: 'a',type: 'pie',radius: ['20%', '70%'],roseType: 'area',zlevel: 10,label: {normal: {show: true,formatter: '{b}',textStyle: {fontSize: 12,},position: 'outside'},emphasis: {show: true}},labelLine: {normal: {show: true,length: 15,length2: 50,lineStyle: {type: 'dotted'}},emphasis: {show: true}},data: [{value: 35,name: '湖南'}, {value: 28,name: '河北'}, {value: 23,name: '廣東'}, {value: 18,name: '四川'}, {value: 13,name: '浙江'}, {value: 8,name: '江蘇'}, {value: 5,name: '湖北'}]}]}myChart.setOption(option, true);window.addEventListener('resize', () => {myChart.resize();});}}} </script><style lang="scss" scoped>.sn-title{text-align: center;color: white;}.wrap-container{width: 532px;height: 400px;.chartsdom{width: 100%;height: 100%;}} </style>

13、多彩柱狀圖

<template><div class="wrap-container sn-container"><div class="sn-content"><div class="sn-title">多彩的柱狀圖</div><div class="sn-body"><div class="wrap-container"><div class="chartsdom" id='chart-colorful-bar'></div></div></div></div></div> </template><script>export default {name: 'colorful-bar',mounted() {this.getEchart()},methods: {getEchart() {let myChart = this.$echarts.init(document.getElementById('chart-colorful-bar'))let charts = { // 按順序排列從大到小cityList: ['金融行業', '電子政務', '文創版權', '教育行業', '智慧停車', '醫療互聯', '物流行業'],cityData: [1500, 1200, 900, 600, 400, 300, 100]}let top10CityList = charts.cityList;let top10CityData = charts.cityData;// bar 顏色rgba ，alpha 在后邊 LinearGradient 補充let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19','rgba(255,168,17', 'rgba(218,111,227'];let lineY = [];for (let i = 0; i < charts.cityList.length; i++) {let x = iif (x > color.length - 1) {x = color.length - 1}let data = {name: charts.cityList[i],color: color[x] + ')',value: top10CityData[i],itemStyle: {normal: {show: true,color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: color[x] + ', 0.3)'}, {offset: 1,color: color[x] + ', 1)'}], false),barBorderRadius: 10},emphasis: {shadowBlur: 15,shadowColor: 'rgba(0, 0, 0, 0.1)'}}}lineY.push(data)}// 指定配置和數據let option = {color: color,tooltip: {trigger: 'item',},// 圖表網格相對html元素的上下左右邊界距離grid: {borderWidth: 0,top: '15%',left: '12%',right: '12%',bottom: '10%',containLabel: true},xAxis: [{type: 'value',axisTick: {show: false},axisLine: {show: false},splitLine: {show: false},axisLabel: {show: false}}],yAxis: [{type: 'category',inverse: true,axisTick: {show: false},axisLine: {show: false},axisLabel: {show: true,inside: false,textStyle: {color: '#b3ccf8',fontSize: 13},},data: top10CityList}, {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: true,inside: false,textStyle: {color: '#b3ccf8',fontSize: 13},formatter: (val) => {return `${val}`}},splitArea: {show: false},splitLine: {show: false},data: top10CityData.reverse()}],series: [{name: '',type: 'bar',zlevel: 2,barWidth: '10px',data: lineY,animationDuration: 1500,label: {normal: {color: '#b3ccf8',show: false,position: [0, '-15px'],textStyle: {fontSize: 13},formatter: (a) => {return a.name;}}}}]};// 把配置給實例對象myChart.setOption(option, true);// 添加窗口尺寸變化監聽window.addEventListener('resize', () => {myChart.resize();});}}} </script><style lang="scss" scoped>.sn-title{text-align: center;color: white;}.wrap-container {width: 432px;height: 400px;.chartsdom {width: 100%;height: 100%;}} </style>

五、工程代碼

參考下載地址：Vue之echarts圖表數據可視化常用的一些圖表動態圖表3D圖表的簡單整理

總結

以上是生活随笔為你收集整理的Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。