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} ({d}%)',},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} ({d}%)'},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图表的简单整理