Echarts在线免费图表

 
            let obj = {
   xData: ['2019年', '2020年', '2021年', '2022年', '2023年'],
   // yData0: ['I', 'II', 'III', 'IV', 'V', '劣V'],
   yData1: [0.7, 0.6, 0.5, 0.7, 0.6],
   yData2: [0.6, 0.5, 0.4, 0.6, 0.5],
   yData3: [0.5, 0.4, 0.3, 0.5, 0.4],
   yName1: "Ⅲ类",
   yName2: "Ⅳ~Ⅴ类",
   yName3: "劣Ⅴ类",
}
option = {
   // tooltip: {
   //    trigger: 'axis',
   //    axisPointer: { // 坐标轴指示器，坐标轴触发有效
   //       type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
   //    }
   // },
   backgroundColor: 'rgba(0,0,0,1)',
   legend: {
      show: true,
      top: '5%',
      right: '5%',
      itemWidth: 8, // 图例标记的图形宽度。
      //   itemGap: 20, // 图例每项之间的间隔。
      itemHeight: 8, //  图例标记的图形高度。
      textStyle: {
         color: '#fff',
         fontSize: 14,
         padding: [0, 8, 0, 8]
      },
      data: [obj.yName1, obj.yName2, obj.yName3]

   },
   grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
   },
   tooltip: {
      show: true,
      borderWidth: 0,
      extraCssText: "width: 50px;height: 20px;display:flex;justify-content: center;align-items: center;",
      textStyle: {
         fontSize: 14,
      },
      formatter: function (params) {
         console.log("params", params)
         let htmlStr = ''
         const param = params
         const value = param.value * 100 + "%" //y轴值
         htmlStr += '<span >'
         //文本
         htmlStr += value

         htmlStr += '</span>'
         return htmlStr
      },
   },
   xAxis: [{
      type: 'category',
      data: obj.xData,
      axisTick: {//坐标轴刻度
         show: false,
      },
      axisLabel: {
         textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
            fontWeight: 400
         },
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: "rgba(32, 92, 90, 1)",
         },
      },
   }],
   yAxis: [{
      type: 'value',
      boundaryGap: false,
      axisTick: {//坐标轴刻度
         show: false,
      },
      axisLabel: {
         formatter: function (value, index) {
            return value * 100 + '%';
         },
         textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
            fontWeight: 400
         },
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "rgba(32, 92, 90, 1)",
         },
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: "rgba(218, 218, 218, 0.4)",
         },
      },
   }],
   series: [{
      name: obj.yName1,
      type: 'bar',
      data: obj.yData1,
      barWidth: 8,
      itemStyle: {
         normal: {
            color: " rgba(0, 238, 190, 1)",
         }
      },
      tooltip: {
         backgroundColor: "rgba(0, 238, 190, 0.4)",
         textStyle: {
            fontSize: 14,
            color: "rgba(0, 238, 190, 1)"
         },
      }
   },
   {
      name: obj.yName2,
      type: 'bar',
      data: obj.yData2,
      barWidth: 8,
      barGap: "50%",//柱间距，以柱子宽衡量
      itemStyle: {
         normal: {
            color: "rgba(248, 181, 81, 1)",
         }
      },
      tooltip: {
         backgroundColor: "rgba(248, 181, 81, 0.4)",
         textStyle: {
            fontSize: 14,
            color: "rgba(248, 181, 81, 1)"
         },
      }
   },
   {
      name: obj.yName3,
      type: 'bar',
      data: obj.yData3,
      barWidth: 8,
      barGap: "50%",//柱间距，以柱子宽衡量
      itemStyle: {
         normal: {
            color: "rgba(43, 100, 255, 1)",
         }
      },
      tooltip: {
         backgroundColor: "rgba(43, 100, 255, 0.4)",
         textStyle: {
            fontSize: 14,
            color: "rgba(43, 100, 255, 1)"
         },
      }
   },
   ],
   dataZoom: [{
      type: 'inside', //图表下方的伸缩条
      show: true, //是否显示
      realtime: true, //
      start: 0, //伸缩条开始位置（1-100），可以随时更改
      end: 100, //伸缩条结束位置（1-100），可以随时更改
   }]
};

// if (option && typeof option === "object") {
//    myChart.setOption(option, true);
// }