Echarts在线免费图表

 
              let option = {
    backgroundColor: 'white',
    grid: {
      top: '20%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: "rgba(1, 13, 19, 0.5)",
      borderWidth: 1,
      axisPointer: {
        type: 'shadow',
        // label: {
        //   show: true,
        // },
      },
      formatter: function (params) {
        var str = "";
        if (params.length > 0) {
          str = params[0].name + "<br/>"
        }
        for (var i = 0; i < params.length; i++) {
          if (params[i].seriesName !== "") {
            str +=
              params[i].seriesName +
              ':' +
              params[i].value +
              "家<br/>";
          }
        }
        return str;
      },
      textStyle: {
        color: "rgba(212, 232, 254, 1)",
        // fontSize: fontChart(0.24),
      },
      extraCssText: "z-index:2"
    },
    legend: {
      left: "center",
      top: 30,
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 15,
      borderRadius: 4,
      textStyle: {
        color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 400,
      },
    },
    xAxis: {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022'],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#393939', //X轴文字颜色
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '企业变迁',
        nameGap: 30,  // 表现为上下位置
        nameTextStyle: {
          padding: [0, 0, 0, -30],
          color: "#000",
          fontFamily: "Alibaba PuHuiTi",
          fontSize: 14,
          fontWeight: 600,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#eeeeee',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#393939',
          },
        },
      },
      {
        type: 'value',
        name: '折线',
        nameTextStyle: {
          color: '#393939',
          padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
        },
        nameGap: 30,  // 表现为上下位置
        position: 'right',
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#393939',
          },
        },
        max: 300,
      },

    ],
    series: [
      {
        name: '企业总数',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: '#fdcb6c',
          },
        },
        data: [2800, 2100, 1800, 1070, 1050],
      },
      {
        name: '新增',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'white',
          borderWidth: '2',
          borderColor: '#5470c6',
        },
        lineStyle: {
          color: '#5470c6',
        },
        data: [175, 160, 153, 121, 156],
      },
      {
        name: '退出',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'white',
          borderWidth: '2',
          borderColor: '#91cc75',
        },
        lineStyle: {
          color: '#91cc75',
        },
        data: [212, 140, 132, 55, 40],
      },
      {
        name: '迁入',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'white',
          borderWidth: '2',
          borderColor: '#f3454b',
        },
        lineStyle: {
          color: '#f3454b',
        },
        data: [122, 213, 128, 146, 106],
      },
      {
        name: '迁出',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'white',
          borderWidth: '2',
          borderColor: '#fac858',
        },
        lineStyle: {
          color: '#fac858',
        },
        data: [140, 113, 108, 92, 43],
      },
    ],
  };