Echarts在线免费图表

 
            // 初始化图表数据
let legendData = ["菜篮子企业", "稳产保供重点企业"];
let xAxisData = ["2021", "2022", "2023", "2024", "2025","2026"]
let seriesData = [1, 4, 5, 6, 6, 2]
let seriesData1 = [1, 2, 4, 3, 6, 5]

option = {
   backgroundColor:"#064965",
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      }
   },
   legend: {
      icon: 'rect',
      right: "0%",
      top: '2%',
      itemWidth: 7, // 设置宽度
      itemHeight: 7, // 设置高度
      itemGap: 15, // 设置间距
      textStyle: { //图例文字的样式
         color: '#89BFE5',
         fontSize: 12
      }
   },
   grid: {
      top: '30%',
      left: '5%',
      right: '2%',
      bottom: '2%',
      containLabel: true
   },
   xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
         lineStyle: {
            color: "rgba(117, 168, 202, 0.4)"
         },
         show: true
      },
      axisTick: {
         show: false
      },

      axisLabel: {
         color: '#fff',
         fontSize: 12,
         interval: 0,
      }
   },
   yAxis: [
      {
         name: '单位：个',
         type: "value",
         inverse: false,
         splitLine: {
            show: true,
            lineStyle: {
               color: 'rgba(117, 168, 202, 0.3)',
               type: 'dashed'
            }
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: "##89BFE5"
            }
         },
         axisLabel: {
            formatter: "{value}",
            textStyle: {
               color: '#89BFE5'
            }
         },
         nameTextStyle: {
            color: '#89BFE5',
            padding: [0, 0, 0, 15]
         },
         axisTick: {
            show: false
         }
      },
   ],
   // dataZoom: [
   //   {
   //     type: 'slider',
   //     show: xAxisData.length > this.scrollLen ? true : false,
   //     startValue: 0,
   //     endValue: this.scrollLen - 1,
   //     height: '4',
   //     bottom: '0px',
   //     zoomLock: true,
   //     fillerColor: "#04A6FB", // 滚动条颜色
   //     borderColor: "rgba(0,0,0, 0)",
   //     backgroundColor: "#4e5d6a",
   //     handleSize: 0, // 两边手柄尺寸
   //     showDetail: false // 拖拽时是否展示滚动条两侧的文字
   //   },
   //   {
   //     type: "inside", // 支持内部鼠标滚动平移
   //     zoomOnMouseWheel: true, // 关闭滚轮缩放
   //     moveOnMouseWheel: true, // 开启滚轮平移
   //     moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
   //   }
   // ],
   series: [
      // 左
      {
         name: legendData[0],
         type: 'bar',
         barWidth: 4,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(4, 169, 255, 1)'
               }, {
                  offset: 1,
                  color: 'rgba(4, 169, 255,0)'
               }])
            }
         },
         data: seriesData
      },
      // 右
      {
         name: legendData[0],
         type: 'bar',
         barWidth: 5,
         barGap: 0,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 67, 123, 1)'
               }, {
                  offset: 1,
                  color: 'rgba(0, 67, 123, 0)'
               }])
            }
         },
         data: seriesData,
         tooltip: {
            show: false
         },
      },
      // 上部
      {
         name: legendData[0],
         type: "pictorialBar",
         symbolSize: [10, 3],
         symbolOffset: [-5, -1],
         symbolPosition: "end",
         symbol: "diamond",
         z: 12,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(4, 166, 251, 1)'
               }, {
                  offset: 1,
                  color: 'rgba(2, 131, 197, 1)'
               }])
            }
         },
         tooltip: {
            show: false
         },
         data: seriesData
      },
      // 左
      {
         name: legendData[1],
         type: 'bar',
         barWidth: 4,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(4, 255, 169, 1)'
               }, {
                  offset: 1,
                  color: 'rgba(4, 255, 169, 0)'
               }])
            }
         },
         data: seriesData1
      },
      // 右
      {
         type: 'bar',
         barWidth: 5,
         barGap: 0,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(4, 135, 91, 1)'
               }, {
                  offset: 1,
                  color: 'rgba(4, 135, 91, 0)'
               }])
            }
         },
         data: seriesData1,
         tooltip: {
            show: false
         },
      },
      // 上部
      {
         type: "pictorialBar",
         symbolSize: [10, 3],
         symbolOffset: [5, -2],
         symbolPosition: "end",
         symbol: "diamond",
         z: 12,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(10, 167, 88, 1)'
               }, {
                  offset: 1,
                  color: 'rgba(10, 167, 88, 1)'
               }])
            }
         },
         tooltip: {
            show: false
         },
         data: seriesData1
      },
   ]
}