Echarts在线免费图表

 
            let option = {
   backgroundColor: 'rgba(0,0,0,.8)',
   xAxis: {
      show: true,
      type: "category",
      data: ["2020", "2030", "2040", "2050"],
      nameTextStyle: {
         fontSize: "25",
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisLabel: {
         interval: 0,
         textStyle: {
            color: "#fff",
            fontSize: 15,
         },
         margin: 10, //刻度标签与轴线之间的距离。
      },
   },
   yAxis: {
      show: false,
      type: "value",
   },
   series: [
      {
         type: "bar",
         data: [
            {
               value: 20,
               label: {
                  show: false,
               },
            },
            {
               value: 50,
               label: {
                  show: false,
               },
            },
            {
               value: 70,
               label: {
                  show: false,
               },
            },
            {
               value: 100,
               label: {
                  show: false,
               },
            },
         ],
         showBackground: false,
         barWidth: "30%",
         label: {
            normal: {
               position: "top",
               formatter: "{c}GW",
               fontSize: 15,
               color: "#fff",
            },
         },
         itemStyle: {
            borderWidth: 2,
            borderType: "solid",
            borderColor: "rgba(236, 236, 236, 0.6)",
            color: "rgba(236, 236, 236, 0.6)",
         },
         emphasis: {
            itemStyle: {
               color: "rgba(236, 236, 236, 1)",
            },
         },
      },
   ],
   grid: {
      show: false,
      left: "0",
      top: "20%",
      right: "0",
      bottom: "28%",
   },
};

myChart.on('click', (res) => {
   //先都清空
   option.series[0].data.map((item) => {
      item.label.show = false;
   });
   let itemIndex = res.dataIndex
   option.series[0].data[itemIndex].label.show = true;

   //先将所有的取消高亮
   myChart.dispatchAction({
      type: "downplay",
   });
   //给点击的高亮
   myChart.dispatchAction({
      type: "highlight",
      seriesIndex: res.seriesIndex, //这行不能省
      dataIndex: res.dataIndex,
   });

   myChart.setOption(option, true);
});