Echarts在线免费图表

 
            const Data = ['1月', '2月', '3月', '4月', '5月', '6月']
const sjlData = [200, 250, 370, 150, 350, 110]
const bjlData = [150, 140, 300, 110, 260, 100]
const balData = [80, 70, 80, 70, 80, 70, 80]
const bjl2Data = [70, 60, 70, 60, 70, 90, 70]
option = {
  backgroundColor: "#000",
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(13,5,30,.6)',
    borderWidth: 1,
    borderColor: '#4ddd8f',
    padding: 5,
    textStyle: {
      color: '#fff'
    }
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    top: 60,
    right: 30,
    icon: 'rect',
    textStyle: {
      color: '#c7d3e5'
    }
  },
  grid: {
    top: '25%',
    left: '5%',
    right: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: Data,
      axisPointer: {
        type: 'shadow'
      },
      axisTick: {
        show: true,
        length: 4,
        lineStyle: {
          color: 'rgba(199,211,229,0.5)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(199,211,229,0.5)'
        }
      },
      axisLabel: {
        color: '#c7d3e5'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: 500,
      nameTextStyle: {
        color: '#c7d3e5'
      },
      axisLabel: {
        color: '#c7d3e5'
      },
      axisTick: {
        show: true,
        length: 4,
        lineStyle: {
          color: 'rgba(64,136,254,1)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(199,211,229,0.3)',
          width: 1,
          type: 'dashed'
        }
      }
    },
    {
      type: 'value',
      scale: true,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(199,211,229,0.3)'
        }
      },
      max: 100,
      min: 0,
      axisLabel: {
        formatter: '{value}%',  //右侧以百分比进行展示
        show: true,
        textStyle: {
          color: '#c7d3e5',
        }
      },
      nameTextStyle: {
        color: '#c7d3e5'
      },
      axisTick: {
        show: true,
        length: 4,
        lineStyle: {
          color: 'rgba(64,136,254,1)'
        }
      },
    }
  ],
  series: [
    {
      name: '零售额',
      type: 'bar',
      barWidth: 14,
      data: sjlData,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(11, 160, 255, 1)",
          },
          {
            offset: 1,
            color: "rgba(11, 160, 255, 0)",
          },
        ]),
      }
    },
    {
      name: '乡村零售额',
      type: 'bar',
      barWidth: 14,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(245, 213, 39, 1)",
          },
          {
            offset: 1,
            color: "rgba(245, 213, 39, 0)",
          },
        ]),
      },
      data: bjlData
    },
    {
      name: '零售额同比',
      type: 'line',
      yAxisIndex: 1,
      symbol: 'none',
      data: balData,
      itemStyle: {
        color: '#2DF3E2'
      }
    },
    {
      name: '乡村零售额同比',
      type: 'line',
      yAxisIndex: 1,
      symbol: 'none',
      data: bjl2Data,
      itemStyle: {
        color: '#885DFF'
      }
    }
  ]
};