浅学echarts-柱状图-开箱即用

需要用到echarts可以浅看一下

下面这些属性对照这找一下就可以实现一下功能。。。

参照一下图查看

const SerialOptions = (title?: string, barColorOne?: string, barColorTwo?: string, list?: Array<any>) => {
    return {
      title: {
        text: title||'',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        confine: true,
        backgroundColor: "rgba(255, 255, 255, 1)",
        borderWidth: 0,
        borderColor: "#fff",
        padding: 0,
        textStyle: {
          fontSize: 12,
          color: '#3C3E4A',
        },
        formatter: function (params: any) {
          const data = params?.[0]
          let context = '';
          (params||[]).forEach((item: any) => {
            context = `${context}<div style="overflow: hidden; padding: 2px 3px;">
                                      <div style="float: left;margin-right:3px;"><div style="transform:scale(0.6,0.6);">${item?.marker}</div></div>
                                      <div style="float: left;margin-right:20px;">${item?.seriesName||'-'}:</div>
                                      <div style="float: right;">${item?.value||'0'}${item?.seriesName=='订单金额占比'?'%':'万元'}</div>
                                </div>`;
          });
          let text = `<div>
                        <div style="padding:6px 10px;font-size: 14px; max-width:140px; white-space: pre-wrap;">${data?.name}</div>
                        <div style="border-top:1px solid #E5E5E5; padding: 4px;">
                          ${context}
                        </div>
                      </div>`;
          return text;
        },
      },
      legend: {
        top: 10,
        itemWidth: 20,
        itemHeight: 12,
        data: [
          {name:'订单金额', icon:'path://M62 62h900v900h-900v-900z'},// 方块
          {name:'订单金额占比', icon:'path://M62 462h900v100H62z'},// 直线
        ]
      },
      grid:{
        left:50,
        top:60,
        right:50,
      },
      xAxis: {
        type: 'category',
        data:  (list||[]).map(n=>n.productName),// 数据分类名称
        axisLabel: {
          show: true,
          color: "#3C3E4A",
          fontSize: 12,
          rotate:'35',
          formatter: function (params: any) {
            return xAxisFormatter(params)
          },
          rich: {
            a: {
                lineHeight: 14
            },
            b: {
                height: 14,
                align:'center'
            },
          }
        },
        axisTick: {show: false,},
        splitLine: {show: false,},
        axisLine: {
          show: true,
          lineStyle: {
              color: "#E5E5E5"
          }
        },
      },
      yAxis: [
        {
          type: 'value',
          min: 0,
          splitNumber: 4,
          name: '单位:万元',
          nameTextStyle: {
            verticalAlign: "bottom",
            align: "center",
            padding: [0, 36, 0, 0],
            color: "#3C3E4A",
            fontSize: 12
          },
          nameLocation: "end",
          nameGap: 15,
          axisLabel: {
            show: true,
            color: "#3C3E4A",
            fontSize: 12,
          },
          axisTick: {show: false,},
          splitLine: {
            show: true,
            lineStyle: {
              color: "#E5E5E5",
              type: "dashed"
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: "#E5E5E5"
            }
          },
          alignTicks: true,
        },
        {
          type: 'value',
          min: 0,
          splitNumber: 4,
          name: '单位:%',
          nameTextStyle: {
            verticalAlign: "bottom",
            align: "left",
            padding: [0, 0, 0, 0],
            color: "#3C3E4A",
            fontSize: 12
          },
          nameLocation: "end",
          nameGap: 15,
          axisLabel: {
            show: true,
            color: "#3C3E4A",
            fontSize: 12,
          },
          axisTick: {show: false,},
          splitLine: {
            show: true,
            lineStyle: {
              color: "#E5E5E5",
              type: "dashed"
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: "#E5E5E5"
            }
          },
          alignTicks: true,
        },
      ],
      series: [
        {
          yAxisIndex: 0,
          name: '订单金额',
          type: 'bar',
          barWidth: 12,
          data: (list||[]).map(n=>n.orderAmount),// 订单金额
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: barColorOne||'#6BCBFF',
                },
                {
                  offset: 1,
                  color: barColorTwo||'#1881ED',
                },
              ]),
              barBorderRadius: [15, 15, 0, 0],
            },
          },
        },
        {
          yAxisIndex: 1,
          type: 'line',
          name: '订单金额占比',
          data: (list||[]).map(n=>n.orderAmountRatio),// 订单金额占比
          itemStyle: {
            normal: {
              lineStyle: { color: '#FD8F28' },
              color: '#FD8F28',
            },
          },
          symbol: 'none',//数据交叉点样式
        },
      ],
    }
  }