Echarts在线免费图表

 
             let yValue = [
        [10,12,15,26,5],
        [0.5,1.2,2.8,1.6,1],
      ];
      let names = ["项目数", "项目经费"];
      let xValue = ['国家部委', '地方政府', '科研院所', '高等院校', '其他'];
      let colorList = [
        { color0: "#ccdafb", color1: "#416FBE" },
        { color0: "#FFB8B8", color1: "#A4353D" },
      ];
      let series = [];
      let xoffset = (names.length - 1) * -8;
      names.forEach((item, index) => {
        series.push({
          name: item,
          type: "pictorialBar",
          symbol: "rect",
          symbolSize: [3, 10],
          symbolPosition: "end",
          symbolOffset: [6, xoffset + index * 15],
          z: 2,
          tooltip: {
            show: false,
          },
          itemStyle: {
            color: colorList[index].color0,
          },
          data: yValue[index],
          xAxisIndex: index,
        });
        series.push({
          name: item,
          type: "bar",
          barGap: '50%',
          barWidth: 10,
          z: 1,
          label: {
            show: true,
            position: "right",
            color: "#969a9d",
            offset: [10, 0],
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: colorList[index].color0,
              },
              {
                offset: 1,
                color: colorList[index].color1,
              },
            ]),
          },
          data: yValue[index],
          xAxisIndex: index,
        });
      });
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (prams) {
            var newStr = prams[0].name + ":<br/>"
            for(let index in prams){
                let unit = prams[index].seriesName == '项目数'? '个':'万元'
                newStr += (prams[index].marker + ' ' + prams[index].seriesName + '：' + prams[index].value + unit + '<br/>')
            }
               return  newStr
          },
        },
        grid: {
          left: "0%",
          right: "15%",
          bottom: "0%",
          top: '8%',
          containLabel: true,
        },
        yAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0, // 解决x轴名称过长问题
              fontSize: 12,
              color: "#333333",
              lineHeight: 16,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#E4E4E4",
              },
            },
            data: xValue,
          },
        ],
        xAxis: [
          {
            name: "个", //名称
            min: 0,
            max: Math.max(...yValue[0]),
            type: "value", //连续类型
            nameTextStyle: {
              padding: [0, 0, 0, 0], // 修改单位位置
              color: "#7F7F7F",
              fontSize: 14,
              fontWeight: 400,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#EFEFEF",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#7F7F7F",
              fontSize: 14,
              fontWeight: 400,
            },
          },
          {
            name: "万元", //名称
            min: 0,
            max: Math.max(...yValue[1]),
            type: "value", //连续类型
            nameTextStyle: {
              padding: [0, 0, 0, 5], // 修改单位位置
              verticalAlign: 'bottom',
              color: "#7F7F7F",
              fontSize: 14,
              fontWeight: 400,
            },
            axisLine: {
              //坐标轴样式
              show: false, //不显示
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              color: "#7F7F7F",
              fontSize: 14,
              fontWeight: 400,
            },
          },
        ],
        series: series,
      };