Echarts在线免费图表

 
            var data = {
   label: ["测试1","测试2","测试3","测试4","测试5","测试6","测试7","测试8","测试9","测试10"],
   value: [10,20,30,40,50,60,70,80,90,100]
}
let dataZoomMove = {
   start: data.label.length,
   end: Math.ceil(data.label.length / 3)
}
option = {
   backgroundColor: "#fff",
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(21, 154, 255, 0.52)",
      textStyle: {
         color: "#000",
      },
      borderColor: "#159AFF",
      axisPointer: {
         lineStyle: {
            color: "transparent",
         },
      },
   },
   dataZoom: [
      {
         show: false, // 为true 滚动条出现
         startValue: dataZoomMove.start,
         endValue: dataZoomMove.end,
         yAxisIndex: [0, 1], //关联多个y轴
      },
      {
         //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
         type: "inside",
         yAxisIndex: 0,
         zoomOnMouseWheel: false, //滚轮是否触发缩放
         moveOnMouseMove: true, //鼠标滚轮触发滚动
         moveOnMouseWheel: true,
      },
   ],
   grid: {
      containLabel: true,
      bottom: 20,
      left: 30,
      top: 20,
      right: 40,
   },
   xAxis: {
      // name: '(条)',
      data: data.label,
      type: 'value',
      splitLine: {
         lineStyle: {
            // color: 'rgba(77, 128, 254, 0.1)',
            color: '#e7e9ef',
            type: 'line',
         },
      },
      axisTick: {
         show: true,
      },

      axisLabel: {
         //  改变x轴字体颜色和大小
         show: true,
         textStyle: {
            color: '#8f919e',
            fontSize: 12,
         },
      },
   },
   yAxis: [
      {
         type: "category",
         data: data.label,
         inverse: false,
         axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 26,
            margin: 2, //刻度标签与轴线之间的距离
            formatter: function (value) {
               let k = Math.abs(data.label.indexOf(value) - data.label.length + 1);
               // let index = k < 9 ? "0" + (k + 1) : k + 1;
               let index = k < 9 ? (k + 1) : k + 1;

               if (index == "1") {
                  return `{one|${index}} {a|${value}}`
               } else if (index == "2") {
                  return `{two|${index}} {a|${value}}`
               } else if (index == "3") {
                  return `{three|${index}} {a|${value}}`
               }
               if (index < 10) {
                  return `{four|${index}} {a|${value}}`
               }
               return `{five|${index}} {a|${value}}`
            },
            rich: {
               b: {
                  borderColor: "#000",
                  borderWidth: 1,
                  padding: [3, 1, 0, 1],
                  color: "#000",
                  fontSize: 12,
               },
               a: {
                  fontSize: 12,
                  color: "#000",
                  padding: [4, 0, 0, 8],
               },
               // 第一名
               one: {
                  backgroundColor: "#E86452",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
               },
               // 第二名
               two: {
                  backgroundColor: "#FF9845",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
               },
               // 第三名
               three: {
                  backgroundColor: "#F6BD16",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
               },
               // 一位数
               four: {
                  backgroundColor: "rgba(0,0,0,0.15)",
                  color: "white",
                  width: 12,
                  height: 16,
                  padding: [1, 0, 0, 5],
                  borderRadius: 10,
                  fontSize: 11,
               },
               // 两位数
               five: {
                  backgroundColor: "rgba(0,0,0,0.15)",
                  color: "white",
                  width: 16,
                  height: 16,
                  padding: [1, 0, 0, 1],
                  borderRadius: 10,
                  fontSize: 11,
               },
            },
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
      {
         type: "category",
         data: data.label,
         inverse: false,
         axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 24,
            margin: 2,
            formatter: function (value) {
               let k = data.label.indexOf(value);
               let index = k;
               return `{a|${data.value[index]}}`;
            },
            rich: {
               a: {
                  fontSize: 12,
                  color: "#000",
                  padding: [4, 0, 0, 0],
                  fontFamily: "DOUYU",
               },
            },
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         }
      },
   ],
   series: [
      {
         data: data.value,
         type: "bar",
         barWidth: 6,
         showBackground: true,
         backgroundStyle: {
            color: '#f5f8ff'
         },
         itemStyle: {
            normal: {
               barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  '#2FAEF2', '#1CD8A8'
               ].map((color, offset) => ({
                  color,
                  offset
               }))), // 渐变
            },
         }
      },
   ]
};