echarts 自定义柱状图,模拟3d效果

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>智慧法务综合平台</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
    </head>
    <body style="background: #030a2e;">
        <div id="main" style="width: 500px;height: 500px;border:1px solid red"> </div>
    </body>
<script>
  var myChart = echarts.init(document.getElementById('main'));
  // 添加3d的图片
  var imageUrl = "image://img/common/echarts-bar-column-default.png";
  var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      legend: {
        show:true,
        data:["合同额", "合同量"],
        textStyle: {
          color: "#54aac9",
          fontSize: '14px'
        },
        bottom: '18px'
      },
      grid: {
        left: '100px',
        right: '100px',
        top: '60px',
        bottom: '80px'
      },
      xAxis: [{
        type: "category",
        data: ["2018", "2019", "2020", "2021"],
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "rgba(101, 198, 231, 0.7)",
            fontSize: '12px',
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(101, 198, 231, 0.2)"
          }
        }
      }],
      yAxis: [{
        name:'亿元' ,
        nameTextStyle: {//Y轴单位颜色
          color: "rgba(101, 198, 231, 0.7)",
          fontSize: '12px'
        },
        nameLocation: "center",
        nameGap: '45',
        type: 'value',
        axisLabel: {
          interval: 0,
          textStyle: {//Y轴坐标数值颜色
            color: "rgba(101, 198, 231, 0.7)",
            fontSize: '12px'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {//Y轴坐标线颜色
            color: "rgba(101, 198, 231, 0.2)"
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }, {
        name: "万份",
        nameTextStyle: {
          color: "rgba(101, 198, 231, 0.7)",
          fontSize:'12px'
        },
        nameLocation: "center",
        nameGap:'40',
        nameRotate:'-90',
        type: 'value',
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "rgba(101, 198, 231, 0.7)",
            fontSize: '12px'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(101, 198, 231, 0.2)"
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }],
      series: [{
        name: "合同额",
        type: 'pictorialBar',
        barWidth: '22px',
        symbol: "rect",
        label: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#01f0ff'
              }, {
                offset: 1,
                color: '#005559'
              }]
            }
          }
        },
        data:[
          { value: '351.70', symbol: imageUrl },
          { value: '549.06', symbol: imageUrl },
          { value: '672.98', symbol: imageUrl },
          { value: '99.15', symbol: imageUrl }
        ]
      }, {
        name:"合同量" ,
        type: 'line',
        itemStyle: {
          normal: {
            color: '#93f6fe',
          }
        },
        data: ["52.85", "66.96", "45.84", "7.73"]
      }]
  };
  myChart.setOption(option);
</script>

</html>

 

posted @ 2021-04-27 10:38  美力  阅读(2271)  评论(0)    收藏  举报