zoukankan      html  css  js  c++  java
  • 《ECharts》伪立体柱状图

    <div id="barEcharts" style=" 500px;height:400px;"></div>
    init() {
      this.charts = echarts.init(document.getElementById('barEcharts'));
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          // 会canvas的应该都能看得懂,shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - 13, shape.y - 13]
          const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
          const c3 = [xAxisPoint[0], xAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [xAxisPoint[0], xAxisPoint[1]]
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
          const c4 = [shape.x + 18, shape.y - 9]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + 18, shape.y - 9]
          const c3 = [shape.x + 5, shape.y - 22]
          const c4 = [shape.x - 13, shape.y - 13]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      // 注册三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
    
      const MAX = [100, 100, 100, 100, 100]
      const VALUE = [20, 30, 50, 90, 30]
      let option = {
        backgroundColor: "#012366",
    
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params, ticket, callback) {
            const item = params[1]
            return item.name + ' : ' + item.value;
          }
        },
        grid: {
          left: 40,
          right: 40,
          bottom: 40,
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['小年', '除夕', '大年', '元宵', '寒食'],
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          offset: 25,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            show: true,
            fontSize: 16
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            fontSize: 16
          },
          boundaryGap: ['20%', '20%']
        },
        series: [{
          type: 'custom',
          renderItem: function (params, api) {
            const location = api.coord([api.value(0), api.value(1)])
            // 自定义每根柱子的颜色(总高度,透明柱子)
            let color1 = '',
                color2 = '';
            if(api.value()===0){
              color1 = '#00A2DB55';
              color2 = '#36D0E933';
            } else if(api.value()===1){
              color1 = '#0C3FFD55';
              color2 = '#3764FC33';
            } else if(api.value()===2){
              color1 = '#4E15D255';
              color2 = '#904AFD33';
            } else if(api.value()===3){
              color1 = '#A727E555';
              color2 = '#F90BFD33';
            } else if(api.value()===4){
              color1 = '#7114F555';
              color2 = '#9929EA33';
            }
            var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color1 },
              { offset: 1, color: color2 }
            ])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }]
            }
          },
          data: MAX
        }, {
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            // 自定义每根柱子的颜色(数据柱子,实体柱子)
            let color1 = '',
                color2 = '';
            if(api.value()===0){
              color1 = '#00A2DB';
              color2 = '#36D0E9';
            } else if(api.value()===1){
              color1 = '#0C3FFD';
              color2 = '#3764FC';
            } else if(api.value()===2){
              color1 = '#4E15D2';
              color2 = '#904AFD';
            } else if(api.value()===3){
              color1 = '#A727E5';
              color2 = '#F90BFD';
            } else if(api.value()===4){
              color1 = '#7114F5';
              color2 = '#9929EA';
            }
            var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color1 },
              { offset: 1, color: color2 }
            ])
            return {
              type: 'group',
              children: [{
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }, {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }, {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: color
                }
              }]
            }
          },
          data: VALUE
        },
        // 如需单独设置图表的一些样式,可单独列一个对象,下列对象只是修改(总高度透明柱子)的对象
        // 如需设置(数据柱子)的参数,需再创建一个对象 
        {
          type: 'bar',
          label: {
            normal: {
              show: false,
              position: 'top',
              fontSize: 16,
              color: '#fff',
              offset: [2, -25]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {
    
          },
          data: MAX
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
    }

    PS: 代码来源于:https://www.makeapie.com/editor.html?c=xoqSlmiSRZ  ,我对源码进行了部分处理

  • 相关阅读:
    std thread
    windows更新包发布地址
    How to set up logging level for Spark application in IntelliJ IDEA?
    spark 错误 How to set heap size in spark within the Eclipse environment?
    hadoop 常用命令
    windows 安装hadoop 3.2.1
    windows JAVA_HOME 路径有空格,执行软连接
    day01MyBatisPlus条件构造器(04)
    day01MyBatisPlus的CRUD 接口(03)
    day01MyBatisPlus入门(02)
  • 原文地址:https://www.cnblogs.com/chensv/p/15562759.html
Copyright © 2011-2022 走看看