Echarts在线免费图表

 
            
  var yData = [6000, 10, 20, 1000, 9000, 0];
  var xData = ['扎到', '马平', '平西', '西过境', '倒给', '武功'];

option = {
    color: ["rgba(231,134,247)"],
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "2%",
      right: "5%",
      bottom: "5%",
      top: "30px",
      containLabel: true,
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        startValue: 0,
        endValue: 7,
        filterMode: 'filter',
        height: 4,
        bottom: 5,
        handleSize: '300%',
        handleIcon:
          'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
        handleStyle: {
          color: '#0E1557'
        },
        backgroundColor: '#1c3a75',
        fillerColor: '#295fcc',
        borderColor: 'transparent',
        textStyle: {
          color: 'transparent'
        },
        dataBackground: {
          areaStyle: {
            opacity: 0
          },
          lineStyle: {
            opacity: 0
          }
        }
      }
    ],
    legend: {
      show: true,
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      formatter: ["{a|{name}}"].join("\n"),
      textStyle: {
        fontSize: 12,
        color: "#6A93B9",
        height: 8,
        rich: {
          a: {
            verticalAlign: "bottom",
          },
        },
      },
      data: ["事故数"],
    },
    xAxis: {
      type: "category",
      axisLabel: {          //坐标轴字体颜色
        textStyle: {
          color: '#9eaaba'
        }
      },
      axisLine: {
        lineStyle: {
          color: "#e5e5e5"
        }
      },
      axisTick: {       //y轴刻度线
        show: false
      },
      splitLine: {    //网格
        show: false,
      },
      boundaryGap: true,
      data: xData,
    },
    yAxis: {
      type: 'value',
      axisLabel: {        //坐标轴字体颜色
        textStyle: {
          color: '#9eaaba'
        }
      },
      axisLine: {
        show: false,
      },
      axisTick: {       //y轴刻度线
        show: false
      },
      splitLine: {    //网格
        show: true,
        lineStyle: {
          color: '#dadde4',
          type: "dashed"
        }
      }
    },
    series: [
      {
        type: "line",
        symbol: 'circle',
        smooth: true, // 是否曲线
        name: "事故数", // 图例对应类别
        data: yData, // 纵坐标数据
        symbolSize: 8,
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: {
                //数值样式
                fontSize: 14,
                color: "rgba(231,134,247)"
              },
            },
          }
        },
        lineStyle: {
          normal: {
            shadowColor: 'rgba(231,134,247, .4)',
            shadowBlur: 8,
            shadowOffsetY: 10,
            shadowOffsetX: 0,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(231,134,247, .4)'
            }, {
              offset: 1,
              color: 'rgba(231,134,247, 0)'
            }]),
          }
        },
      },
    ],
  };