echarts 3D柱状图

最新推荐文章于 2023-04-03 14:49:27 发布

看不见看不见看不见

最新推荐文章于 2023-04-03 14:49:27 发布

阅读量175

点赞数

分类专栏： echarts 笔记文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_49266680/article/details/128577199

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

 arr: [60, 120, 30, 12, 50, 60, 80],


  let that = this
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        top: '15%',
        left: '3%',
        bottom: '3%',
        containLabel: true
      },
      series: [{
          type: 'pictorialBar',
          name: '',
          z: 10,
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolPosition: 'end', //图形边缘与柱子结束的地方内切
          symbolSize: ['-95%', 10], //根据柱子大小来做调整
          label: { //echarts内部显示数字
            color: '#000',
            show: true,
            position: 'top',
          },
          itemStyle: {
            color: function (param) {
              let max = Math.max(...that.data.arr)
              if (param.value == max) {
                return '#FAE26A';
              } else {
                return '#6DDD80';
              }

            },
          },
          data: that.data.arr
        },
        {
          type: 'bar',
          name: 'reference bar',
          barGap: '-100%',
          // symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔
          symbolOffset: [0, 0],
          z: 2,
          itemStyle: {
            color: function (param) {
              let max = Math.max(...that.data.arr)
              console.log(max);
              if (param.value == max) {
                // return '#FAE26A';
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#FED200' //指0%处的颜色
                }, {
                  offset: 0.5,
                  color: '#FED200' //指100%处的颜色
                },
                {
                  offset: 0.5,
                  color: '#CBA902'
                },
                {
                  offset: 1,
                  color: '#CBA902'
                }
                ], false)

              } else {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#42C358' //指0%处的颜色
                  }, {
                    offset: 0.5,
                    color: '#42C358' //指100%处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#1FAC37'
                  },
                  {
                    offset: 1,
                    color: '#1FAC37'
                  }
                ], false)


              }

            },
          },
          data: that.data.arr
        },
        {
          type: 'pictorialBar',
          name: 'joy',
          barGap: '-100%',
          z: 3,
          symbol: 'triangle',
          symbolOffset: [0, 5],
          symbolSize: ['-100%', 5],
          symbolRotate: 180,
          itemStyle: {
            color: function (param) {
              let max = Math.max(...that.data.arr)
              console.log(max);
              if (param.value == max) {

                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#FED200' //指0%处的颜色
                }, {
                  offset: 0.5,
                  color: '#FED200' //指100%处的颜色
                },
                {
                  offset: 0.5,
                  color: '#CBA902'
                },
                {
                  offset: 1,
                  color: '#CBA902'
                }
                ], false)

              } else {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#42C358' 
                  }, {
                    offset: 0.5,
                    color: '#42C358' 
                  },
                  {
                    offset: 0.5,
                    color: '#1FAC37'
                  },
                  {
                    offset: 1,
                    color: '#1FAC37'
                  }
                ], false)
              }


            },
          },
          data:that.data.arr
        }
      ]

    };