Echarts在线免费图表

 
            var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  yAxis: [
    { type: 'value', gridIndex: 0 },
    { type: 'value', gridIndex: 1 }
  ],
  xAxis: [
    {
      type: 'category',
      data: ['林草湿地占比']
    },
    {
      type: 'category',
      data: ['林地占比'],
      gridIndex: 1
    }
  ],
  grid: [
    {
      left: '3%',
      right: '4%',
      bottom: '3%',
      width: '25%',
      containLabel: true
    },
    {
      left: '28%',
      right: '4%',
      bottom: '3%',
      width: '25%',
      containLabel: true
    }
  ],
  series: [
    {
      name: '三北工程区',
      type: 'bar',
      data: [18203],

      itemStyle: {
        normal: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: ['#55B551', '#49AE68'][params.dataIndex]
              },
              {
                offset: 0.5,
                color: ['#749C43', '#4B7E9D'][params.dataIndex]
              },
              {
                offset: 1,
                color: ['#868E3B', '#4B67B3'][params.dataIndex]
              }
            ]);
          },
          opacity: 0.8
        }
      },
      gridIndex: 0,
      yAxisIndex: 0,
      xAxisIndex: 0,
    },
    {
      name: '全国',
      type: 'bar',
      data: [23489], 
      itemStyle: {
        normal: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: ['#49AE68'][params.dataIndex]
              },
              {
                offset: 0.5,
                color: ['#4B7E9D'][params.dataIndex]
              },
              {
                offset: 1,
                color: ['#4B67B3'][params.dataIndex]
              }
            ]);
          },
          opacity: 0.8
        }
      },
      gridIndex: 0,
      yAxisIndex: 0,
      xAxisIndex: 0
    },
    {
      name: '全国',
      type: 'bar',
      data: [23489],
      itemStyle: {
        normal: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: ['#49AE68'][params.dataIndex]
              },
              {
                offset: 0.5,
                color: ['#4B7E9D'][params.dataIndex]
              },
              {
                offset: 1,
                color: ['#4B67B3'][params.dataIndex]
              }
            ]);
          },
          opacity: 0.8
        }
      },
      gridIndex: 1,
      yAxisIndex: 1,
      xAxisIndex: 1
    }
    ,
    {
      name: '全国',
      type: 'bar',
      data: [23489],
      itemStyle: {
        normal: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: ['#49AE68'][params.dataIndex]
              },
              {
                offset: 0.5,
                color: ['#4B7E9D'][params.dataIndex]
              },
              {
                offset: 1,
                color: ['#4B67B3'][params.dataIndex]
              }
            ]);
          },
          opacity: 0.8
        }
      },
      gridIndex: 1,
      yAxisIndex: 1,
      xAxisIndex: 1
    }
  ]
};