devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts实现3D柱状图(视觉层面)_echarts里3d圆柱状图

作者：黑客灵魂 | 2024-08-19 09:43:55

赞

踩

echarts里3d圆柱状图

一、第一种效果

效果图

使用步骤 

完整实例，copy就可直接使用

  1. <template>
  2.     <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4.  
  5. <script>
  6.     import echarts from 'echarts'
  7.     require('echarts/theme/macarons') // echarts theme
  8.     import resize from '@/views/dashboard/mixins/resize'
  9.  
  10.     export default {
  11.         mixins: [resize],
  12.         props: {
  13.             className: {
  14.                 type: String,
  15.                 default: 'chart'
  16.             },
  17.             width: {
  18.                 type: String,
  19.                 default: '100%'
  20.             },
  21.             height: {
  22.                 type: String,
  23.                 default: '400px'
  24.             },
  25.             dataList: {
  26.                 type: Array,
  27.                 default: []
  28.             }
  29.         },
  30.         data() {
  31.             return {
  32.                 chart: null,
  33.                 xAxisData: ['数学', '语文', '英语', '物理', '化学'],
  34.                 data1: [200, 100, 200, 50, 100],
  35.                 data2: [300, 200, 300, 200, 300]
  36.             }
  37.         },
  38.         mounted() {
  39.             this.$nextTick(() => {
  40.                 this.initChart()
  41.             })
  42.         },
  43.         beforeDestroy() {
  44.             if (!this.chart) {
  45.                 return
  46.             }
  47.             this.chart.dispose()
  48.             this.chart = null
  49.         },
  50.         watch: {
  51.             dataList(val, oldVal) {//普通的watch监听
  52.                 this.initChart()
  53.             }
  54.         },
  55.         methods: {
  56.             initChart() {
  57.  
  58.                 this.chart = echarts.init(this.$el, 'macarons')
  59.                 this.chart.setOption(
  60.                     {
  61.                         tooltip: {
  62.                             trigger: 'item'
  63.                         },
  64.                         grid: {
  65.                             top: '10%',
  66.                             bottom: '20%',
  67.                             right: '2%',
  68.                             left: '10%'
  69.                         },
  70.                         legend: {
  71.                             data: ['2021', '2022'],
  72.                             left: '20px',
  73.                             textStyle: {
  74.                                 color: '#FFFFFF'
  75.                             }
  76.                         },
  77.                         graphic: [
  78.                             {
  79.                                 type: 'image', // 图形元素类型
  80.                                 id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
  81.                                 right: 'center', // 根据父元素进行定位 （居中）
  82.                                 bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
  83.                                 z: 0, // 层叠
  84.                                 bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
  85.                                 style: {
  86.                                     image:
  87.                                         'https://img0.baidu.com/it/u=3846011338,1538056540&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500', // 这里一定要注意、注意，必须是https开头的图片路径地址
  88.                                     width: 800,
  89.                                     height: 400
  90.                                 }
  91.                             }
  92.                         ],
  93.                         xAxis: {
  94.                             data: this.xAxisData,
  95.                             axisTick: {
  96.                                 show: false
  97.                             },
  98.                             axisLine: {
  99.                                 show: false
  100.                             },
  101.                             axisLabel: {
  102.                                 interval: 0,
  103.                                 textStyle: {
  104.                                     color: '#fff',
  105.                                     fontSize: 20
  106.                                 },
  107.                                 margin: 40
  108.                             }
  109.                         },
  110.                         yAxis: {
  111.                             splitLine: {
  112.                                 show: false
  113.                             },
  114.                             axisTick: {
  115.                                 show: true,
  116.                                 alignWithLabel: true,
  117.                                 inside: true
  118.                             },
  119.                             axisLine: {
  120.                                 show: true
  121.                             },
  122.                             axisLabel: {
  123.                                 textStyle: {
  124.                                     color: '#fff',
  125.                                     fontSize: 20
  126.                                 }
  127.                             }
  128.                         },
  129.                         series: [
  130.                             // 底部的光晕
  131.                             {
  132.                                 name: '',
  133.                                 type: 'pictorialBar',
  134.                                 tooltip: {
  135.                                     show: false
  136.                                 },
  137.                                 symbolSize: [90, 40],
  138.                                 symbolOffset: [0, 20],
  139.                                 z: 1,
  140.                                 itemStyle: {
  141.                                     normal: {
  142.                                         color: 'transparent',
  143.                                         borderColor: '#26B2E8',
  144.                                         borderType: 'solid',
  145.                                         borderWidth: 1
  146.                                     }
  147.                                 },
  148.                                 data: [1, 1, 1, 1, 1]
  149.                             },
  150.  
  151.                             {
  152.                                 name: '2021',
  153.                                 type: 'bar',
  154.                                 barWidth: 45,
  155.                                 barGap: '-100%',
  156.                                 z: 0,
  157.                                 itemStyle: {
  158.                                     color: '#E8CCFF',
  159.                                     opacity: 0.7
  160.                                 },
  161.                                 data: this.data2
  162.                             },
  163.                             {
  164.                                 name: '2022',
  165.                                 type: 'bar',
  166.                                 barWidth: 45,
  167.                                 barGap: '-100%',
  168.                                 itemStyle: {
  169.                                     color: '#FF9A22'
  170.                                 },
  171.                                 data: this.data1
  172.                             },
  173.                             //头部、中部、尾部圆片
  174.                             {
  175.                                 name: '2021', // 头部
  176.                                 type: 'pictorialBar',
  177.                                 symbolSize: [45, 25],
  178.                                 symbolOffset: [0, -10],
  179.                                 z: 12,
  180.                                 symbolPosition: 'end',
  181.                                 itemStyle: {
  182.                                     color: '#D28EFF',
  183.                                     opacity: 1
  184.                                 },
  185.                                 data: this.data2
  186.                             },
  187.                             {
  188.                                 name: '2022',//中部
  189.                                 type: 'pictorialBar',
  190.                                 symbolSize: [45, 25],
  191.                                 symbolOffset: [0, -10],
  192.                                 z: 12,
  193.                                 symbolPosition: 'end',
  194.                                 itemStyle: {
  195.                                     opacity: 1,
  196.                                     color: '#FF3EFF'
  197.                                 },
  198.                                 data: this.data1
  199.                             },
  200.                             {
  201.                                 //三个最低下的圆片
  202.                                 name: '',
  203.                                 type: 'pictorialBar',
  204.                                 symbolSize: [45, 25],
  205.                                 symbolOffset: [0, 10],
  206.                                 z: 12,
  207.                                 itemStyle: {
  208.                                     opacity: 1,
  209.                                     color: 'red'
  210.                                 },
  211.                                 data: this.data1
  212.                             }
  213.                         ]
  214.                     }
  215.                 )
  216.             }
  217.         }
  218.     }
  219. </script>
  1. itemStyle: {
  2.                                 normal: {
  3.                                     //这里是颜色
  4.                                     color: function (params) {
  5.                                         //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
  6.                                         var colorList = ['#00A3E0', '#FFA100', '#ffc0ca', '#CCCCCC', '#749f83', '#04A035', '#8729D9', '#c207c9', '#c90762', '#c90707'];
  7.                                         return colorList[params.dataIndex]
  8.                                     }
  9.                                 }
  10.                             }

附带网图背景

二、第二种效果

效果图

使用步骤 

完整实例，copy就可直接使用

  1. <template>
  2.     <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4.  
  5. <script>
  6.     import echarts from 'echarts'
  7.     require('echarts/theme/macarons') // echarts theme
  8.     import resize from '@/views/dashboard/mixins/resize'
  9.  
  10.     export default {
  11.         mixins: [resize],
  12.         props: {
  13.             className: {
  14.                 type: String,
  15.                 default: 'chart'
  16.             },
  17.             width: {
  18.                 type: String,
  19.                 default: '100%'
  20.             },
  21.             height: {
  22.                 type: String,
  23.                 default: '400px'
  24.             },
  25.             dataList: {
  26.                 type: Array,
  27.                 default: []
  28.             }
  29.         },
  30.         data() {
  31.             return {
  32.                 chart: null,
  33.                 xAxisData: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7', '区域8', '区域9'],
  34.                 colorArr: ['#0C628C', '#3887D5', '#2570BB'],
  35.                 barWidth: 30,
  36.                 data1: [6, 7, 3, 11, 33, 38, 22, 55, 66],
  37.                 bottomData: [1, 1, 1, 1, 1, 1, 1, 1, 1],
  38.                 topData: [100, 100, 100, 100, 100, 100, 100, 100, 100],
  39.                 names: ["区域"]
  40.             }
  41.         },
  42.         mounted() {
  43.             this.$nextTick(() => {
  44.                 this.initChart()
  45.             })
  46.         },
  47.         beforeDestroy() {
  48.             if (!this.chart) {
  49.                 return
  50.             }
  51.             this.chart.dispose()
  52.             this.chart = null
  53.         },
  54.         watch: {
  55.             dataList(val, oldVal) {//普通的watch监听
  56.                 this.initChart()
  57.             }
  58.         },
  59.         methods: {
  60.             initChart() {
  61.                 var color = {
  62.                     type: 'linear',
  63.                     x: 0,
  64.                     x2: 1,
  65.                     y: 0,
  66.                     y2: 0,
  67.                     colorStops: [
  68.                         {
  69.                             offset: 0,
  70.                             color: this.colorArr[0]
  71.                         },
  72.                         {
  73.                             offset: 0.5,
  74.                             color: this.colorArr[0]
  75.                         },
  76.                         {
  77.                             offset: 0.5,
  78.                             color: this.colorArr[1]
  79.                         },
  80.                         {
  81.                             offset: 1,
  82.                             color: this.colorArr[1]
  83.                         }
  84.                     ]
  85.                 }
  86.                 this.chart = echarts.init(this.$el, 'macarons')
  87.                 this.chart.setOption(
  88.                     {
  89.                         tooltip: {
  90.                             trigger: 'axis',
  91.                             formatter: function (params) {
  92.                                 var str = params[0].name + ':'
  93.                                 params.filter(function (item) {
  94.                                     if (item.componentSubType == 'bar' && item.seriesName === '数据') {
  95.                                         str += item.value
  96.                                     }
  97.                                 })
  98.                                 return str
  99.                             }
  100.                         },
  101.                         grid: {
  102.                             left: '0%',
  103.                             right: '10%',
  104.                             bottom: '3%',
  105.                             containLabel: true
  106.                         },
  107.                         xAxis: [
  108.                             {
  109.                                 type: 'category',
  110.                                 name: this.names[0],
  111.                                 data: this.xAxisData,
  112.                                 // 更改坐标轴颜色
  113.                                 axisLine: {
  114.                                     lineStyle: {
  115.                                         color: "#FFFFFF"
  116.                                     },
  117.                                     onZero: false
  118.                                 },
  119.                                 // x轴的字体样式
  120.                                 axisLabel: {
  121.                                     interval: 0,
  122.                                     textStyle: {
  123.                                         color: "#FFFFFF", // 更改坐标轴文字颜色
  124.                                         fontSize: 14, // 更改坐标轴文字大小
  125.                                         fontFamily: 'MicrosoftYaHei'
  126.                                     },
  127.                                 }
  128.  
  129.                             }
  130.                         ],
  131.                         yAxis: [
  132.                             {
  133.                                 type: 'value',
  134.                                 name: '得分',
  135.                                 axisLabel: {
  136.                                     formatter: '{value}',
  137.                                     textStyle: {
  138.                                         color: this.fontColorY, // 更改坐标轴文字颜色
  139.                                         fontSize: 12, // 更改坐标轴文字大小
  140.                                         fontFamily: 'MicrosoftYaHei'
  141.                                     }
  142.                                 },
  143.                                 // 更改坐标轴颜色
  144.                                 axisLine: {
  145.                                     lineStyle: {
  146.                                         color: "#FFFFFF"
  147.                                     }
  148.                                 },
  149.                                 // 网格线
  150.                                 splitLine: {
  151.                                     // 网格线
  152.                                     lineStyle: {
  153.                                         type: 'solid',
  154.                                         with: 0.5,
  155.                                         color: this.borderColor
  156.                                     }
  157.                                 }
  158.                             }
  159.                         ],
  160.                         series: [
  161.                             // 数据低下的圆片
  162.                             {
  163.                                 name: '',
  164.                                 type: 'pictorialBar',
  165.                                 symbolOffset: ['0%', '50%'],
  166.                                 symbolSize: [this.barWidth - 4, (10 * (this.barWidth - 4)) / this.barWidth],
  167.                                 z: 12,
  168.                                 symbol: 'diamond',
  169.                                 itemStyle: {
  170.                                     opacity: 1,
  171.                                     color: color
  172.                                     // color: 'transparent'
  173.                                 },
  174.                                 data: this.bottomData
  175.                             },
  176.                             // 数据的柱状图
  177.                             {
  178.                                 name: '数据',
  179.                                 type: 'bar',
  180.                                 barWidth: this.barWidth,
  181.                                 itemStyle: {
  182.                                     // lenged文本
  183.                                     opacity: 1, // 这个是 透明度
  184.                                     color: color
  185.                                 },
  186.  
  187.                                 data: this.data1
  188.                             },
  189.                             // 替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20
  190.                             {
  191.                                 type: 'bar',
  192.                                 symbol: 'diamond',
  193.                                 barWidth: this.barWidth + 2,
  194.                                 itemStyle: {
  195.                                     color: 'transparent'
  196.                                 },
  197.                                 data: this.data1
  198.                             },
  199.                             // 数据顶部的样式
  200.                             {
  201.                                 name: '',
  202.                                 type: 'pictorialBar',
  203.                                 symbol: 'diamond',
  204.                                 symbolOffset: ['0%', '-50%'],
  205.                                 symbolSize: [this.barWidth, 10],
  206.                                 z: 12,
  207.                                 itemStyle: {
  208.                                     normal: {
  209.                                         opacity: 1,
  210.                                         color: this.colorArr[2],
  211.                                         label: {
  212.                                             show: true, // 开启显示
  213.                                             position: 'top', // 在上方显示
  214.                                             textStyle: {
  215.                                                 // 数值样式
  216.                                                 color: '#FFFFFF',
  217.                                                 fontSize: 12,
  218.                                                 top: 50
  219.                                             }
  220.                                         }
  221.                                     }
  222.                                 },
  223.                                 symbolPosition: 'end',
  224.                                 data: this.data1
  225.                             },
  226.  
  227.                             // 阴影的顶部
  228.                             {
  229.                                 name: '', // 头部
  230.                                 type: 'pictorialBar',
  231.                                 symbol: 'diamond',
  232.                                 symbolOffset: ['0%', '-50%'],
  233.                                 symbolSize: [this.barWidth, 10],
  234.                                 z: 12,
  235.                                 symbolPosition: 'end',
  236.                                 itemStyle: {
  237.                                     color: 'blue',
  238.                                     opacity: 0.3,
  239.                                     borderWidth: 1,
  240.                                     borderColor: 'rgba(18, 47, 133,1)'
  241.                                 },
  242.                                 data: this.topData
  243.                             },
  244.                             // 后面的背景
  245.                             {
  246.                                 name: '',
  247.                                 type: 'bar',
  248.                                 barWidth: this.barWidth,
  249.                                 barGap: '-100%',
  250.                                 z: 0,
  251.                                 itemStyle: {
  252.                                     color: 'rgba(18, 47, 133,0.3)'
  253.                                 },
  254.  
  255.                                 data: this.topData
  256.                             }
  257.                         ]
  258.                     }
  259.                 )
  260.             }
  261.         }
  262.     }
  263. </script>

三、第三种效果

效果图

使用步骤

完整实例，copy就可直接使用 

  1. <template>
  2.     <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4.  
  5. <script>
  6.     import echarts from 'echarts'
  7.     require('echarts/theme/macarons') // echarts theme
  8.     import resize from '@/views/dashboard/mixins/resize'
  9.  
  10.     export default {
  11.         mixins: [resize],
  12.         props: {
  13.             className: {
  14.                 type: String,
  15.                 default: 'chart'
  16.             },
  17.             width: {
  18.                 type: String,
  19.                 default: '100%'
  20.             },
  21.             height: {
  22.                 type: String,
  23.                 default: '400px'
  24.             },
  25.             dataList: {
  26.                 type: Array,
  27.                 default: []
  28.             }
  29.         },
  30.         data() {
  31.             return {
  32.                 chart: null,
  33.                 MAX: [800, 800, 800, 800, 800, 800, 800],
  34.                 NAME: [2015, 2016, 2017, 2018, 2019, 2020, 2021],
  35.                 VALUE: [200, 400, 300, 500, 700, 300, 100],
  36.                 VALUE2: [500, 200, 700, 400, 300, 600, 400],
  37.             }
  38.         },
  39.         mounted() {
  40.             this.$nextTick(() => {
  41.                 this.initChart()
  42.             })
  43.         },
  44.         beforeDestroy() {
  45.             if (!this.chart) {
  46.                 return
  47.             }
  48.             this.chart.dispose()
  49.             this.chart = null
  50.         },
  51.         watch: {
  52.             dataList(val, oldVal) {//普通的watch监听
  53.                 this.initChart()
  54.             }
  55.         },
  56.         methods: {
  57.             initChart() {
  58.                 const offsetX = 16;
  59.                 const offsetY = 8;
  60.                 [-18, 18].forEach((customOffset, index) => {
  61.                     const CubeLeft = echarts.graphic.extendShape({
  62.                         shape: {
  63.                             x: 0,
  64.                             y: 0,
  65.                         },
  66.                         buildPath: function (ctx, shape) {
  67.                             const xAxisPoint = shape.xAxisPoint;
  68.                             const c0 = [shape.x - customOffset, shape.y];
  69.                             const c1 = [shape.x - offsetX - customOffset, shape.y - offsetY];
  70.                             const c2 = [xAxisPoint[0] - offsetX - customOffset, xAxisPoint[1] - offsetY];
  71.                             const c3 = [xAxisPoint[0] - customOffset, xAxisPoint[1]];
  72.                             ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
  73.                         },
  74.                     });
  75.                     const CubeRight = echarts.graphic.extendShape({
  76.                         shape: {
  77.                             x: 0,
  78.                             y: 0,
  79.                         },
  80.                         buildPath: function (ctx, shape) {
  81.                             const xAxisPoint = shape.xAxisPoint;
  82.                             const c1 = [shape.x - customOffset, shape.y];
  83.                             const c2 = [xAxisPoint[0] - customOffset, xAxisPoint[1]];
  84.                             const c3 = [xAxisPoint[0] + offsetX - customOffset, xAxisPoint[1] - offsetY];
  85.                             const c4 = [shape.x + offsetX - customOffset, shape.y - offsetY];
  86.                             ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  87.                         },
  88.                     });
  89.                     const CubeTop = echarts.graphic.extendShape({
  90.                         shape: {
  91.                             x: 0,
  92.                             y: 0,
  93.                         },
  94.                         buildPath: function (ctx, shape) {
  95.                             const c1 = [shape.x - customOffset, shape.y];
  96.                             const c2 = [shape.x + offsetX - customOffset, shape.y - offsetY];
  97.                             const c3 = [shape.x - customOffset, shape.y - offsetX];
  98.                             const c4 = [shape.x - offsetX - customOffset, shape.y - offsetY];
  99.                             ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  100.                         },
  101.                     });
  102.                     echarts.graphic.registerShape('CubeLeft' + index, CubeLeft);
  103.                     echarts.graphic.registerShape('CubeRight' + index, CubeRight);
  104.                     echarts.graphic.registerShape('CubeTop' + index, CubeTop);
  105.                 });
  106.                 this.chart = echarts.init(this.$el, 'macarons')
  107.                 this.chart.setOption(
  108.                     {
  109.                         backgroundColor: '#012366',
  110.                         grid: {
  111.                             left: '1%',
  112.                             right: '8%',
  113.                             bottom: '5%',
  114.                             top: '8%',
  115.                             containLabel: true,
  116.                         },
  117.                         tooltip: {
  118.                             trigger: 'axis',
  119.                             axisPointer: {            // 坐标轴指示器，坐标轴触发有效
  120.                                 type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  121.                             },
  122.                             formatter: function (e) {
  123.                                 var str =
  124.                                     e[2].axisValue +
  125.                                     "<br>" +
  126.                                     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
  127.                                     "rgba(225,155,172, 1)" +
  128.                                     ";'></span>" +
  129.                                     "课程数量 : " +
  130.                                     e[2].value +
  131.                                     "<br>" +
  132.                                     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
  133.                                     "rgba(25,155,172, 1)" +
  134.                                     ";'></span>" +
  135.                                     "完成数量 : " +
  136.                                     e[3].value;
  137.                                 return str;
  138.                             },
  139.                         },
  140.                         legend: {
  141.                             orient: 'vertical',
  142.                             x: 'right',
  143.                             y: 'center',
  144.                             data: ['课程数量', '完成数量',]
  145.                         },
  146.                         xAxis: {
  147.                             type: 'category',
  148.                             data: this.NAME,
  149.                             name:"年份",
  150.                             axisLine: {
  151.                                 show: true,
  152.                                 lineStyle: {
  153.                                     width: 2,
  154.                                     color: '#7ca7d9',
  155.                                 },
  156.                             },
  157.                             axisTick: {
  158.                                 show: false,
  159.                             },
  160.                             axisLabel: {
  161.                                 fontSize: 14,
  162.                             },
  163.                         },
  164.                         yAxis: {
  165.                             type: 'value',
  166.                             name:"数量",
  167.                             minInterval: 1,
  168.                             axisLine: {
  169.                                 show: true,
  170.                                 lineStyle: {
  171.                                     width: 2,
  172.                                     color: '#2B7BD6',
  173.                                 },
  174.                             },
  175.                             splitLine: {
  176.                                 show: true,
  177.                                 lineStyle: {
  178.                                     color: 'rgba(201,217,241,0.23)',
  179.                                 },
  180.                             },
  181.                             axisTick: {
  182.                                 show: false,
  183.                             },
  184.                             axisLabel: {
  185.                                 fontSize: 14,
  186.                             },
  187.                         },
  188.  
  189.                         dataZoom: [{
  190.                             show: true,
  191.                             height: 10,
  192.                             xAxisIndex: [
  193.                                 0
  194.                             ],
  195.                             bottom: 0,
  196.                             start: 10,
  197.                             end: 50,
  198.                             handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  199.                             handleSize: '110%',
  200.                             handleStyle: {
  201.                                 color: "#d3dee5",
  202.  
  203.                             },
  204.                             textStyle: {
  205.                                 color: "#fff"
  206.                             },
  207.                             borderColor: "#90979c"
  208.  
  209.  
  210.                         }, {
  211.                             type: "inside",
  212.                             show: true,
  213.                             height: 15,
  214.                             start: 1,
  215.                             end: 10
  216.                         }],
  217.                         series: [
  218.                             {
  219.                                 // 最大高度
  220.                                 type: 'custom',
  221.                                 renderItem: function (params, api) {
  222.                                     const location = api.coord([api.value(0), api.value(1)])
  223.                                     return {
  224.                                         type: 'group',
  225.                                         children: [{
  226.                                             type: 'CubeLeft0',
  227.                                             shape: {
  228.                                                 api,
  229.                                                 x: location[0],
  230.                                                 y: location[1],
  231.                                                 xAxisPoint: api.coord([api.value(0), 0])
  232.                                             },
  233.                                             style: {
  234.                                                 fill: `rgba(25,155,172, .1)`
  235.                                             }
  236.                                         }, {
  237.                                             type: 'CubeRight0',
  238.                                             shape: {
  239.                                                 api,
  240.                                                 x: location[0],
  241.                                                 y: location[1],
  242.                                                 xAxisPoint: api.coord([api.value(0), 0])
  243.                                             },
  244.                                             style: {
  245.                                                 fill: `rgba(25,155,172, .3)`
  246.                                             }
  247.                                         }, {
  248.                                             type: 'CubeTop0',
  249.                                             shape: {
  250.                                                 api,
  251.                                                 x: location[0],
  252.                                                 y: location[1],
  253.                                                 xAxisPoint: api.coord([api.value(0), 0])
  254.                                             },
  255.                                             style: {
  256.                                                 fill: `rgba(25,155,172, .4)`
  257.                                             }
  258.                                         }]
  259.                                     }
  260.                                 },
  261.                                 data: this.MAX
  262.                             },
  263.  
  264.                             {
  265.                                 // 最大高度
  266.                                 type: 'custom',
  267.                                 renderItem: function (params, api) {
  268.                                     const location = api.coord([api.value(0), api.value(1)])
  269.                                     return {
  270.                                         type: 'group',
  271.                                         children: [{
  272.                                             type: 'CubeLeft1',
  273.                                             shape: {
  274.                                                 api,
  275.                                                 x: location[0],
  276.                                                 y: location[1],
  277.                                                 xAxisPoint: api.coord([api.value(0), 0])
  278.                                             },
  279.                                             style: {
  280.                                                 fill: `rgba(225,155,172, .1)`
  281.                                             }
  282.                                         }, {
  283.                                             type: 'CubeRight1',
  284.                                             shape: {
  285.                                                 api,
  286.                                                 x: location[0],
  287.                                                 y: location[1],
  288.                                                 xAxisPoint: api.coord([api.value(0), 0])
  289.                                             },
  290.                                             style: {
  291.                                                 fill: `rgba(225,155,172, .3)`
  292.                                             }
  293.                                         }, {
  294.                                             type: 'CubeTop1',
  295.                                             shape: {
  296.                                                 api,
  297.                                                 x: location[0],
  298.                                                 y: location[1],
  299.                                                 xAxisPoint: api.coord([api.value(0), 0])
  300.                                             },
  301.                                             style: {
  302.                                                 fill: `rgba(225,155,172, .4)`
  303.                                             }
  304.                                         }]
  305.                                     }
  306.                                 },
  307.                                 data: this.MAX
  308.                             },
  309.                             {
  310.                                 type: 'custom',
  311.                                 renderItem: (params, api) => {
  312.                                     const location = api.coord([api.value(0), api.value(1)]);
  313.                                     return {
  314.                                         type: 'group',
  315.                                         children: [
  316.                                             {
  317.                                                 type: 'CubeLeft0',
  318.                                                 shape: {
  319.                                                     api,
  320.                                                     xValue: api.value(0),
  321.                                                     yValue: api.value(1),
  322.                                                     x: location[0] - 0,
  323.                                                     y: location[1],
  324.                                                     xAxisPoint: api.coord([api.value(0), 0]),
  325.                                                 },
  326.                                                 style: {
  327.                                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  328.                                                         {
  329.                                                             offset: 0,
  330.                                                             color: 'rgba(25,155,172, .5)',
  331.                                                         },
  332.                                                         {
  333.                                                             offset: 1,
  334.                                                             color: 'rgba(25,155,172, .5)',
  335.                                                         },
  336.                                                     ]),
  337.                                                 },
  338.                                             },
  339.                                             {
  340.                                                 type: 'CubeRight0',
  341.                                                 shape: {
  342.                                                     api,
  343.                                                     xValue: api.value(0),
  344.                                                     yValue: api.value(1),
  345.                                                     x: location[0] - 0,
  346.                                                     y: location[1],
  347.                                                     xAxisPoint: api.coord([api.value(0), 0]),
  348.                                                 },
  349.                                                 style: {
  350.                                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  351.                                                         {
  352.                                                             offset: 0,
  353.                                                             color: 'rgba(25,155,172, 1)',
  354.                                                         },
  355.                                                         {
  356.                                                             offset: 1,
  357.                                                             color: 'rgba(25,155,172, .5)',
  358.                                                         },
  359.                                                     ]),
  360.                                                 },
  361.                                             },
  362.                                             {
  363.                                                 type: 'CubeTop0',
  364.                                                 shape: {
  365.                                                     api,
  366.                                                     xValue: api.value(0),
  367.                                                     yValue: api.value(1),
  368.                                                     x: location[0] - 0,
  369.                                                     y: location[1],
  370.                                                     xAxisPoint: api.coord([api.value(0), 0]),
  371.                                                 },
  372.                                                 style: {
  373.                                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  374.                                                         {
  375.                                                             offset: 0,
  376.                                                             color: 'rgba(25,155,172, .8)',
  377.                                                         },
  378.                                                         {
  379.                                                             offset: 1,
  380.                                                             color: 'rgba(25,155,172, .8)',
  381.                                                         },
  382.                                                     ]),
  383.                                                 },
  384.                                             },
  385.                                         ],
  386.                                     };
  387.                                 },
  388.                                 data: this.VALUE,
  389.                             },
  390.                             {
  391.                                 type: 'custom',
  392.                                 renderItem: (params, api) => {
  393.                                     const location = api.coord([api.value(0), api.value(1)]);
  394.                                     return {
  395.                                         type: 'group',
  396.                                         children: [
  397.                                             {
  398.                                                 type: 'CubeLeft1',
  399.                                                 shape: {
  400.                                                     api,
  401.                                                     xValue: api.value(0),
  402.                                                     yValue: api.value(1),
  403.                                                     x: location[0] - 0,
  404.                                                     y: location[1],
  405.                                                     xAxisPoint: api.coord([api.value(0), 0]),
  406.                                                 },
  407.                                                 style: {
  408.                                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  409.                                                         {
  410.                                                             offset: 0,
  411.                                                             color: 'rgba(225,155,172, .5)',
  412.                                                         },
  413.                                                         {
  414.                                                             offset: 1,
  415.                                                             color: 'rgba(225,155,172, .5)',
  416.                                                         },
  417.                                                     ]),
  418.                                                 },
  419.                                             },
  420.                                             {
  421.                                                 type: 'CubeRight1',
  422.                                                 shape: {
  423.                                                     api,
  424.                                                     xValue: api.value(0),
  425.                                                     yValue: api.value(1),
  426.                                                     x: location[0] - 0,
  427.                                                     y: location[1],
  428.                                                     xAxisPoint: api.coord([api.value(0), 0]),
  429.                                                 },
  430.                                                 style: {
  431.                                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  432.                                                         {
  433.                                                             offset: 0,
  434.                                                             color: 'rgba(225,155,172, 1)',
  435.                                                         },
  436.                                                         {
  437.                                                             offset: 1,
  438.                                                             color: 'rgba(225,155,172, .5)',
  439.                                                         },
  440.                                                     ]),
  441.                                                 },
  442.                                             },
  443.                                             {
  444.                                                 type: 'CubeTop1',
  445.                                                 shape: {
  446.                                                     api,
  447.                                                     xValue: api.value(0),
  448.                                                     yValue: api.value(1),
  449.                                                     x: location[0] - 0,
  450.                                                     y: location[1],
  451.                                                     xAxisPoint: api.coord([api.value(0), 0]),
  452.                                                 },
  453.                                                 style: {
  454.                                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  455.                                                         {
  456.                                                             offset: 0,
  457.                                                             color: 'rgba(225,155,172, .8)',
  458.                                                         },
  459.                                                         {
  460.                                                             offset: 1,
  461.                                                             color: 'rgba(225,155,172, .8)',
  462.                                                         },
  463.                                                     ]),
  464.                                                 },
  465.                                             },
  466.                                         ],
  467.                                     };
  468.                                 },
  469.                                 data: this.VALUE2,
  470.                             },
  471.                         ],
  472.                     }
  473.                 )
  474.             }
  475.         }
  476.     }
  477. </script>

四、第四种效果

效果图

使用步骤

完整实例，copy就可直接使用

  1. <template>
  2.     <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4.  
  5. <script>
  6.     import echarts from 'echarts'
  7.     require('echarts/theme/macarons') // echarts theme
  8.     import resize from '@/views/dashboard/mixins/resize'
  9.  
  10.     export default {
  11.         mixins: [resize],
  12.         props: {
  13.             className: {
  14.                 type: String,
  15.                 default: 'chart'
  16.             },
  17.             width: {
  18.                 type: String,
  19.                 default: '100%'
  20.             },
  21.             height: {
  22.                 type: String,
  23.                 default: '400px'
  24.             },
  25.             dataList: {
  26.                 type: Array,
  27.                 default: []
  28.             }
  29.         },
  30.         data() {
  31.             return {
  32.                 chart: null,
  33.                 targetData: [50, 60, 40, 80, 120, 90, 70],
  34.                 manualData: [22, 35, 30, 25, 12, 41, 51],
  35.                 mechanismData: [40, 45, 40, 55, 22, 46, 61],
  36.                 xData:['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
  37.                 names:['手工', '机制', '目标值']
  38.             }
  39.         },
  40.         mounted() {
  41.             this.$nextTick(() => {
  42.                 this.initChart()
  43.             })
  44.         },
  45.         beforeDestroy() {
  46.             if (!this.chart) {
  47.                 return
  48.             }
  49.             this.chart.dispose()
  50.             this.chart = null
  51.         },
  52.         watch: {
  53.             dataList(val, oldVal) {//普通的watch监听
  54.                 this.initChart()
  55.             }
  56.         },
  57.         methods: {
  58.             initChart() {
  59.  
  60.                 const color1 = {
  61.                     type: 'linear',
  62.                     x: 1,
  63.                     y: 0,
  64.                     x2: 1,
  65.                     y2: 1,
  66.                     colorStops: [
  67.                         {
  68.                             offset: 0,
  69.                             color: '#9DCAF4'
  70.                         },
  71.                         {
  72.                             offset: 0.8,
  73.                             color: '#0B87FB'
  74.                         }
  75.                     ]
  76.                 };
  77.  
  78.                 const color2 = {
  79.                     type: 'linear',
  80.                     x: 1,
  81.                     y: 0,
  82.                     x2: 1,
  83.                     y2: 1,
  84.                     colorStops: [
  85.                         {
  86.                             offset: 0,
  87.                             color: '#31D5C7'
  88.                         },
  89.                         {
  90.                             offset: 0.8,
  91.                             color: 'rgba(29, 39, 115,0.2)'
  92.                         }
  93.                     ]
  94.                 };
  95.  
  96.                 this.chart = echarts.init(this.$el, 'macarons')
  97.                 this.chart.setOption(
  98.                     {
  99.                         legend: {
  100.                             data: this.names,
  101.                             x: 'right',
  102.                             textStyle: {
  103.                                 // 图例文字大小颜色
  104.                                 fontSize: 12,
  105.                                 color: '#ffffff'
  106.                             }
  107.                         },
  108.                         tooltip: {
  109.                             trigger: 'axis',
  110.                             axisPointer: {
  111.                                 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
  112.                             }
  113.                         },
  114.                         grid: {
  115.                             left: '1%',
  116.                             right: '1%',
  117.                             bottom: '2%',
  118.                             top: '12%',
  119.                             containLabel: true
  120.                         },
  121.                         xAxis: {
  122.                             type: 'category',
  123.                             data: this.xData,
  124.                             axisLabel: {
  125.                                 color: '#fff'
  126.                             },
  127.                             axisLine: {
  128.                                 show: true,
  129.                                 lineStyle: {
  130.                                     color: 'rgba(255, 255, 2555, 0.1)'
  131.                                 }
  132.                             }
  133.                         },
  134.                         yAxis: [
  135.                             {
  136.                                 type: 'value',
  137.                                 name: '制作数量',
  138.                                 axisLabel: {
  139.                                     color: '#fff',
  140.                                     axisLabel: {
  141.                                         color: '#fff',
  142.                                         //y轴文字的配置
  143.                                         textStyle: {
  144.                                             color: "#fff",
  145.                                         },
  146.                                     },
  147.                                 },
  148.                                 splitLine: {
  149.                                     show: true,
  150.                                     lineStyle: {
  151.                                         color: 'rgba(255,255,255,0.2)'
  152.                                     }
  153.                                 },
  154.                                 nameTextStyle: {
  155.                                     //y轴上方单位的颜色
  156.                                     color: "#fff",
  157.                                 },
  158.                             },
  159.                             {
  160.                                 type: 'value',
  161.                                 name: '目标值',
  162.                                 min: 0,
  163.                                 max: 250,
  164.                                 interval: 50,
  165.                                 axisLabel: {
  166.                                     color: '#fff',
  167.                                     //y轴文字的配置
  168.                                     textStyle: {
  169.                                         color: "#fff",
  170.                                     },
  171.                                 },
  172.                                 splitLine: {
  173.                                     show: false,
  174.                                     lineStyle: {
  175.                                         color: 'rgba(255,255,255,0.2)'
  176.                                     }
  177.                                 },
  178.                                 nameTextStyle: {
  179.                                     //y轴上方单位的颜色
  180.                                     color: "#fff",
  181.                                 },
  182.                             }
  183.                         ],
  184.                         series: [
  185.                             {
  186.                                 itemStyle: {
  187.                                     normal: {
  188.                                         // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
  189.                                         color: color1
  190.                                     }
  191.                                 },
  192.                                 data: this.manualData,
  193.                                 type: 'bar',
  194.                                 barWidth: 19,
  195.                                 z: 2,
  196.                                 name: this.names[0]
  197.                             },
  198.                             {
  199.                                 z: 3,
  200.                                 name: this.names[0],
  201.                                 type: 'pictorialBar',
  202.                                 // 柱子顶部
  203.                                 symbolPosition: 'end',
  204.                                 data: this.manualData,
  205.                                 symbol: 'diamond',
  206.                                 symbolOffset: ['-12', -11],
  207.                                 symbolRotate: 90,
  208.                                 symbolSize: [10, 21],
  209.                                 itemStyle: {
  210.                                     normal: {
  211.                                         borderWidth: 1,
  212.                                         color: 'blue'
  213.                                     }
  214.                                 },
  215.                                 tooltip: {
  216.                                     show: false
  217.                                 }
  218.                             },
  219.  
  220.                             {
  221.                                 itemStyle: {
  222.                                     normal: {
  223.                                         // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
  224.                                         color: color2
  225.                                     }
  226.                                 },
  227.                                 data: this.mechanismData,
  228.                                 type: 'bar',
  229.                                 barWidth: 19,
  230.                                 z: 2,
  231.                                 name: this.names[1]
  232.                             },
  233.                             {
  234.                                 z: 3,
  235.                                 name: this.names[1],
  236.                                 type: 'pictorialBar',
  237.                                 // 柱子顶部
  238.                                 symbolPosition: 'end',
  239.                                 data: this.mechanismData,
  240.                                 symbol: 'diamond',
  241.                                 symbolOffset: [12, -11],
  242.                                 symbolRotate: 90,
  243.                                 symbolSize: [8, 19],
  244.                                 itemStyle: {
  245.                                     normal: {
  246.                                         borderWidth: 1,
  247.                                         color: 'green'
  248.                                     }
  249.                                 },
  250.                                 tooltip: {
  251.                                     show: false
  252.                                 }
  253.                             },
  254.  
  255.                             {
  256.                                 name: this.names[2],
  257.                                 type: 'line',
  258.                                 yAxisIndex: 1,
  259.                                 data: this.targetData,
  260.                                 itemStyle: {
  261.                                     normal: {
  262.                                         color: '#FFDE55', //圈圈的颜色
  263.                                         lineStyle: {
  264.                                             color: '#FFDE55' //线的颜色
  265.                                         }
  266.                                     }
  267.                                 }
  268.                             }
  269.                         ]
  270.                     }
  271.                 )
  272.             }
  273.         }
  274.     }
  275. </script>

五、第五种效果

效果图

使用步骤

完整实例，copy就可直接使用

  1. <template>
  2.   <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4.  
  5. <script>
  6.   import echarts from 'echarts'
  7.   require('echarts/theme/macarons') // echarts theme
  8.   import resize from '@/views/dashboard/mixins/resize'
  9.  
  10.   export default {
  11.     mixins: [resize],
  12.     props: {
  13.       className: {
  14.         type: String,
  15.         default: 'chart'
  16.       },
  17.       width: {
  18.         type: String,
  19.         default: '100%'
  20.       },
  21.       height: {
  22.         type: String,
  23.         default: '400px'
  24.       },
  25.       dataList: {
  26.         type: Array,
  27.         default: []
  28.       },
  29.       titleName: {
  30.         type: String,
  31.         default: 'echarts'
  32.       },
  33.       names: {
  34.         type: Array,
  35.         default: ['成本', '目标']
  36.       }
  37.     },
  38.     data() {
  39.       return {
  40.         chart: null,
  41.         sourceList: [],
  42.         listData1: [],
  43.         dataBottom: [],
  44.         listData2: [],
  45.         max: 0,
  46.         maxDate1: 0,
  47.         maxDate2: 0,
  48.       }
  49.     },
  50.     mounted() {
  51.       this.$nextTick(() => {
  52.         this.initChart()
  53.       })
  54.     },
  55.     beforeDestroy() {
  56.       if (!this.chart) {
  57.         return
  58.       }
  59.       this.chart.dispose()
  60.       this.chart = null
  61.     },
  62.     watch: {
  63.       dataList(val, oldVal) {//普通的watch监听
  64.         this.initChart()
  65.       }
  66.     },
  67.     methods: {
  68.       initChart() {
  69.         this.chart = echarts.init(this.$el, 'macarons')
  70.         this.sourceList = []
  71.         this.listData1 = []
  72.         this.listData2 = []
  73.         for (let i = 0; i < this.dataList.length; i++) {
  74.           this.sourceList.push(this.dataList[i].techName)
  75.           this.listData1.push((this.dataList[i].oneNum))
  76.           this.dataBottom.push(1)
  77.           this.listData2.push(this.dataList[i].twoNum)
  78.         }
  79.         this.sourceList = ["2024","2023","2022","2021","2020","2019","2018"]
  80.           this.listData1 = [12,10,0,9,0,5,8]
  81.           this.dataBottom = [1,1,1,1,1,1,1]
  82.           this.listData2 = [11,12,15,6,22,15,10]
  83.         //获取纵坐标最大值--start
  84.         this.maxDate1 = this.listData1[0];
  85.         for (let i = 0; i < this.listData1.length; i++) {
  86.           let item = this.listData1[i];
  87.           item > this.maxDate1 ? this.maxDate1 = item : this.maxDate1 = this.maxDate1;
  88.         }
  89.         this.maxDate2 = this.listData2[0];
  90.         for (let i = 0; i < this.listData2.length; i++) {
  91.           let item = this.listData2[i];
  92.           item > this.maxDate2 ? this.maxDate2 = item : this.maxDate2 = this.maxDate2;
  93.         }
  94.         this.maxDate1 = this.maxDate1 + 1
  95.         this.maxDate2 = this.maxDate2 + 1
  96.         //获取纵坐标最大值--end
  97.         this.chart.setOption({
  98.           tooltip: {
  99.             trigger: 'axis',
  100.             axisPointer: {
  101.               type: 'cross',
  102.               label: {
  103.                 backgroundColor: '#6a7985'
  104.               }
  105.             },
  106.             formatter: function (params) {
  107.               var str = '<div style=" font-size: 16px;color:#FFFFFF">'
  108.               str = str + params[0].name + '<br>'
  109.               params.filter(function (item) {
  110.                 if (item.componentSubType === 'bar' || item.componentSubType === 'line') {
  111.                   str = str + item.seriesName + '：' + item.data + '<br>'
  112.                 }
  113.               })
  114.               str = str + '</div>'
  115.               return str;
  116.             }
  117.           },
  118.           toolbox: {
  119.             feature: {
  120.               dataView: { show: true, readOnly: true },
  121.               magicType: { show: true, type: ['line', 'bar'] },
  122.               restore: { show: true },
  123.               saveAsImage: { show: true, backgroundColor: '#79B9F5', name: this.titleName }
  124.             },
  125.             right: '20px',
  126.           },
  127.           grid: {
  128.             left: '3%',
  129.             right: '3%',
  130.             bottom: '3%',
  131.             containLabel: true
  132.           },
  133.           legend: {
  134.             data: this.names,
  135.             left: '20px',
  136.             textStyle: {
  137.               color: '#FFFFFF'
  138.             }
  139.           },
  140.           xAxis: [
  141.             {
  142.               type: 'category',
  143.               data: this.sourceList,
  144.               axisLine: {
  145.                 //x轴线的颜色以及宽度
  146.                 show: true,
  147.                 lineStyle: {
  148.                   color: "#FFFFFF",
  149.                   type: "solid",
  150.                 },
  151.               },
  152.               axisPointer: {
  153.                 type: 'shadow'
  154.               },
  155.               axisLabel: {
  156.                 show: true,
  157.                 rotate: 45,    // 设置x轴标签旋转角度
  158.                 margin: 15
  159.               }
  160.             }
  161.           ],
  162.           yAxis: [
  163.             {
  164.               type: 'value',
  165.               name: this.names[0],
  166.               axisLabel: {
  167.                 //y轴文字的配置
  168.                 textStyle: {
  169.                   color: "#fff",
  170.                 },
  171.               },
  172.               axisLine: {
  173.                 //y轴线的颜色以及宽度
  174.                 show: true,
  175.                 lineStyle: {
  176.                   color: "#fff",
  177.                   width: 1,
  178.                   type: "solid",
  179.                 },
  180.               },
  181.               splitLine: {
  182.                 //分割线配置
  183.                 show: false,
  184.                 lineStyle: {
  185.                   color: "#fff",
  186.                 },
  187.               },
  188.               nameTextStyle: {
  189.                 //y轴上方单位的颜色
  190.                 color: "#fff",
  191.               },
  192.               max: this.maxDate1
  193.             },
  194.             {
  195.               type: 'value',
  196.               name: this.names[1],
  197.               axisLabel: {
  198.                 //y轴文字的配置
  199.                 textStyle: {
  200.                   color: "#fff",
  201.                 },
  202.               },
  203.               axisLine: {
  204.                 //y轴线的颜色以及宽度
  205.                 show: true,
  206.                 lineStyle: {
  207.                   color: "#fff",
  208.                   width: 1,
  209.                   type: "solid",
  210.                 },
  211.               },
  212.               splitLine: {
  213.                 //分割线配置
  214.                 show: false,
  215.                 lineStyle: {
  216.                   color: "#fff",
  217.                 },
  218.               },
  219.               nameTextStyle: {
  220.                 //y轴上方单位的颜色
  221.                 color: "#fff",
  222.               },
  223.               //设置纵坐标最大值
  224.               max: this.maxDate2
  225.             },
  226.           ],
  227.           series: [
  228.             {
  229.               itemStyle: {
  230.                 normal: {
  231.                   // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
  232.                   color: {
  233.                     type: 'linear',
  234.                     x: 1,
  235.                     y: 0,
  236.                     x2: 1,
  237.                     y2: 1,
  238.                     colorStops: [
  239.                       { offset: 0, color: '#83bff6' },
  240.                       { offset: 0.5, color: '#188df0' },
  241.                       { offset: 1, color: 'blue' }
  242.                     ]
  243.                   }
  244.                 }
  245.               },
  246.               data: this.listData1,
  247.               type: 'bar',
  248.               barWidth: 40,
  249.               tooltip: {
  250.                 valueFormatter: function (value) {
  251.                   return value;
  252.                 }
  253.               },
  254.               z: 2,
  255.               name: this.names[0]
  256.             },
  257.             // 底部的光晕
  258.             {
  259.               name: this.names[0],
  260.               type: 'pictorialBar',
  261.               tooltip: {
  262.                 show: false
  263.               },
  264.               symbolSize: [60, 20],
  265.               symbolOffset: [0, 10],
  266.               z: 1,
  267.               itemStyle: {
  268.                 normal: {
  269.                   color: 'transparent',
  270.                   borderColor: '#26B2E8',
  271.                   borderType: 'solid',
  272.                   borderWidth: 2
  273.                 }
  274.               },
  275.               data: this.dataBottom
  276.             },
  277.             {
  278.               //底部圆片
  279.               name: this.names[0],
  280.               type: 'pictorialBar',
  281.               symbolSize: [40, 15],
  282.               symbolOffset: [0, 5],
  283.               z: 12,
  284.               itemStyle: {
  285.                 opacity: 1,
  286.                 color: 'blue',
  287.                 borderColor: '#03529A'
  288.               },
  289.               data: this.dataBottom
  290.             },
  291.             //头部圆片
  292.             {
  293.               name: this.names[0], // 头部
  294.               type: 'pictorialBar',
  295.               symbolSize: [40, 15],
  296.               symbolOffset: [0, -7],
  297.               z: 3,
  298.               symbolPosition: 'end',
  299.               itemStyle: {
  300.                 color: '#188df0',
  301.                 opacity: 1
  302.               },
  303.               data: this.listData1
  304.             },
  305.             {
  306.               name: this.names[1],
  307.               type: 'line',
  308.               z: 12,
  309.               yAxisIndex: 1,
  310.               tooltip: {
  311.                 valueFormatter: function (value) {
  312.                   return value;
  313.                 }
  314.               },
  315.               lineStyle: {
  316.                 normal: {
  317.                   width: 3 //折线宽度
  318.                 },
  319.               },
  320.               itemStyle: {
  321.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  322.                   { offset: 0, color: '#93CE07' },
  323.                   { offset: 0.2, color: '#FBDB0F' },
  324.                   { offset: 0.4, color: '#FC7D02' },
  325.                   { offset: 0.6, color: '#FD0100' },
  326.                   { offset: 0.8, color: '#AA069F' },
  327.                   { offset: 1, color: '#AC3B2A' }
  328.                 ])
  329.               },
  330.               data: this.listData2
  331.             }
  332.           ]
  333.         })
  334.       }
  335.     }
  336.   }
  337. </script>

六、第六种效果 

效果图

使用步骤

完整实例，copy就可直接使用

  1. <template>
  2.     <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4.  
  5. <script>
  6.     import echarts from 'echarts'
  7.     require('echarts/theme/macarons') // echarts theme
  8.     import resize from '@/views/dashboard/mixins/resize'
  9.  
  10.     export default {
  11.         mixins: [resize],
  12.         props: {
  13.             className: {
  14.                 type: String,
  15.                 default: 'chart'
  16.             },
  17.             width: {
  18.                 type: String,
  19.                 default: '100%'
  20.             },
  21.             height: {
  22.                 type: String,
  23.                 default: '400px'
  24.             },
  25.             dataList: {
  26.                 type: Array,
  27.                 default: []
  28.             },
  29.             name: {
  30.                 type: String,
  31.                 default: ''
  32.             },
  33.             titleName: {
  34.                 type: String,
  35.                 default: 'echarts'
  36.             }
  37.         },
  38.         data() {
  39.             return {
  40.                 chart: null,
  41.                 datas: [],
  42.                 names: [],
  43.                 dataBottom: [],
  44.             }
  45.         },
  46.         mounted() {
  47.             this.$nextTick(() => {
  48.                 this.initChart()
  49.             })
  50.         },
  51.         beforeDestroy() {
  52.             if (!this.chart) {
  53.                 return
  54.             }
  55.             this.chart.dispose()
  56.             this.chart = null
  57.         },
  58.         watch: {
  59.             dataList(val, oldVal) {//普通的watch监听
  60.                 this.initChart()
  61.             },
  62.             name(val, oldVal) {//普通的watch监听
  63.                 this.initChart()
  64.             }
  65.         },
  66.         methods: {
  67.             initChart() {
  68.                 this.names = [];
  69.                 this.datas = [];
  70.                 let list = [];
  71.                 if (this.dataList.length >= 10) {
  72.                     list = this.dataList.slice(0, 10)
  73.                 } else {
  74.                     list = this.dataList
  75.                 }
  76.                 for (let i = 0; i < list.length; i++) {
  77.                     this.names.unshift(list[i].name)
  78.                     this.datas.unshift(list[i].value)
  79.                     this.dataBottom.push(1)
  80.                 }
  81.                 this.chart = echarts.init(this.$el, 'macarons')
  82.                 this.chart.setOption({
  83.                     title: {
  84.                         text: this.name,
  85.                         left: '5',
  86.                         textStyle: {
  87.                             color: '#FFFFFF',
  88.                             fontSize: "14px"
  89.                         }
  90.                     },
  91.                     tooltip: {
  92.                         trigger: 'axis',
  93.                         axisPointer: {
  94.                             type: 'shadow'
  95.                         },
  96.                         formatter: function (params) {
  97.                             var str = '<div style=" font-size: 12px;color:#FFFFFF">'
  98.                             str = str + params[0].name + '<br>'
  99.                             params.filter(function (item) {
  100.                                 if (item.componentSubType === 'bar') {
  101.                                     str = str + item.seriesName + '：' + item.data + '<br>'
  102.                                 }
  103.                             })
  104.                             str = str + '</div>'
  105.                             return str;
  106.                         }
  107.                     },
  108.                     // legend: {
  109.                     //     left: '20'
  110.                     // },
  111.                     grid: {
  112.                         left: '3%',
  113.                         top: '7%',
  114.                         right: '4%',
  115.                         bottom: '3%',
  116.                         containLabel: true
  117.                     },
  118.                     xAxis: {
  119.                         type: 'value',
  120.                         //去掉条纹
  121.                         splitArea: false,
  122.                         boundaryGap: [0, 0.01],
  123.                         axisLine: {
  124.                             //x轴线的颜色以及宽度
  125.                             show: true,
  126.                             lineStyle: {
  127.                                 color: "#FFFFFF",
  128.                                 type: "solid",
  129.                             },
  130.                         },
  131.                         splitLine: {
  132.                             //分割线配置
  133.                             show: false,
  134.                             lineStyle: {
  135.                                 color: "#fff",
  136.                             },
  137.                         },
  138.                     },
  139.                     yAxis: {
  140.                         type: 'category',
  141.                         //去掉条纹
  142.                         splitArea: false,
  143.                         data: this.names,
  144.                         axisLabel: {
  145.                             show: false,
  146.                             // rotate: 45    // 设置x轴标签旋转角度
  147.                             //y轴文字的配置
  148.                             textStyle: {
  149.                                 color: "#fff",
  150.                             },
  151.                         },
  152.                         axisLine: {
  153.                             //y轴线的颜色以及宽度
  154.                             show: true,
  155.                             lineStyle: {
  156.                                 color: "#fff",
  157.                                 width: 1,
  158.                                 type: "solid",
  159.                             },
  160.                         },
  161.                         splitLine: {
  162.                             //分割线配置
  163.                             show: false,
  164.                             lineStyle: {
  165.                                 color: "#fff",
  166.                             },
  167.                         },
  168.                         nameTextStyle: {
  169.                             //y轴上方单位的颜色
  170.                             color: "#fff",
  171.                         },
  172.                     },
  173.  
  174.                     graphic: {
  175.                         type: 'text',     // 类型：文本
  176.                         left: 'center',
  177.                         top: 'middle',
  178.                         silent: true,     // 不响应事件
  179.                         invisible: this.datas.length > 0,   // 有数据就隐藏
  180.                         style: {
  181.                             fill: '#9d9d9d',
  182.                             fontWeight: 'bold',
  183.                             text: '暂无报警数据',
  184.                             fontFamily: 'Microsoft YaHei',
  185.                             fontSize: 20,
  186.  
  187.                         }
  188.                     },
  189.                     series: [
  190.                         {
  191.                             name: this.name,
  192.                             type: 'bar',
  193.                             z: 10,
  194.                             barWidth: this.datas.length > 5 ? 20 : 40, // 设置柱子宽度为30
  195.                             data: this.datas,
  196.                             itemStyle: {
  197.                                 normal: {
  198.                                     //这里是颜色
  199.                                     color: function (params) {
  200.                                         //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
  201.                                         var colorList = ['#00A3E0', '#FFA100', '#ffc0ca', '#CCCCCC', '#749f83', '#04A035', '#8729D9', '#c207c9', '#c90762', '#c90707'];
  202.                                         return colorList[params.dataIndex]
  203.                                     }
  204.                                 }
  205.                             }
  206.                         },
  207.                         // 底部的光晕
  208.                         {
  209.                             name: this.name,
  210.                             type: 'pictorialBar',
  211.                             tooltip: {
  212.                                 show: false
  213.                             },
  214.                             symbolSize: this.datas.length > 5 ? [15, 30] : [20, 60],
  215.                             symbolOffset: this.datas.length > 5 ? [-8, 0]:[-10, 0],
  216.                             z: 9,
  217.                             itemStyle: {
  218.                                 normal: {
  219.                                     color: 'transparent',
  220.                                     borderColor: '#26B2E8',
  221.                                     borderType: 'solid',
  222.                                     borderWidth: 2
  223.                                 }
  224.                             },
  225.                             data: this.dataBottom,
  226.                         },
  227.                         {
  228.                             //底部圆片
  229.                             name: this.name,
  230.                             type: 'pictorialBar',
  231.                             symbolSize: this.datas.length > 5 ? [10, 20] : [15, 40],
  232.                             symbolOffset: this.datas.length > 5 ? [-5, 0] : [-7, 0],
  233.                             z: 10,
  234.                             itemStyle: {
  235.                                 opacity: 1,
  236.                                 normal: {
  237.                                     //这里是颜色
  238.                                     color: function (params) {
  239.                                         //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
  240.                                         var colorList = ['#00A3E0', '#FFA100', '#ffc0ca', '#CCCCCC', '#749f83', '#04A035', '#8729D9', '#c207c9', '#c90762', '#c90707'];
  241.                                         return colorList[params.dataIndex]
  242.                                     }
  243.                                 },
  244.                             },
  245.                             data: this.dataBottom
  246.                         },
  247.                         //头部圆片
  248.                         {
  249.                             name: this.name, // 头部
  250.                             type: 'pictorialBar',
  251.                             symbolSize: this.datas.length > 5 ? [10, 20] : [15, 40],
  252.                             symbolOffset: [8, 0],
  253.                             z: 13,
  254.                             symbolPosition: 'end',
  255.                             label: {
  256.                                 show: true,
  257.                                 position: 'insideLeft',
  258.                                 valueAnimation: true,
  259.                                 formatter: '{b}:{c}' + '次',
  260.                                 fontSize: 12,
  261.                                 color: 'white'
  262.                             },
  263.                             itemStyle: {
  264.                                 color: '#C1C2C4',
  265.                                 borderColor: 'black',
  266.                                 opacity: 1
  267.                             },
  268.                             data: this.datas
  269.                         },
  270.                     ]
  271.                 })
  272.             }
  273.         }
  274.     }
  275. </script>

七、3D饼图实现

vue中如何使用echarts和echarts-gl实现3D饼图环形饼图_echarts 3d饼图-CSDN博客

八、Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图 

Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图_echarts html 液位柱子图-CSDN博客

九、3D折线图实现

vue中如何使用echarts和echarts-gl实现三维折线图-CSDN博客

十、resize.js 

  1. import { debounce } from '@/utils'
  2.  
  3. export default {
  4.   data() {
  5.     return {
  6.       $_sidebarElm: null,
  7.       $_resizeHandler: null
  8.     }
  9.   },
  10.   mounted() {
  11.     this.initListener()
  12.   },
  13.   activated() {
  14.     if (!this.$_resizeHandler) {
  15.       // avoid duplication init
  16.       this.initListener()
  17.     }
  18.  
  19.     // when keep-alive chart activated, auto resize
  20.     this.resize()
  21.   },
  22.   beforeDestroy() {
  23.     this.destroyListener()
  24.   },
  25.   deactivated() {
  26.     this.destroyListener()
  27.   },
  28.   methods: {
  29.     // use $_ for mixins properties
  30.     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
  31.     $_sidebarResizeHandler(e) {
  32.       if (e.propertyName === 'width') {
  33.         this.$_resizeHandler()
  34.       }
  35.     },
  36.     initListener() {
  37.       this.$_resizeHandler = debounce(() => {
  38.         this.resize()
  39.       }, 100)
  40.       window.addEventListener('resize', this.$_resizeHandler)
  41.  
  42.       this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
  43.       this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
  44.     },
  45.     destroyListener() {
  46.       window.removeEventListener('resize', this.$_resizeHandler)
  47.       this.$_resizeHandler = null
  48.  
  49.       this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
  50.     },
  51.     resize() {
  52.       const { chart } = this
  53.       chart && chart.resize()
  54.     }
  55.   }
  56. }

防抖函数 

  1. /**
  2.  * @param {Function} fn 防抖函数
  3.  * @param {Number} delay 延迟时间
  4.  */
  5. export function debounce(fn, delay) {
  6.   var timer;
  7.   return function () {
  8.     var context = this;
  9.     var args = arguments;
  10.     clearTimeout(timer);
  11.     timer = setTimeout(function () {
  12.       fn.apply(context, args);
  13.     }, delay);
  14.   };
  15. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/1001739
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号