Echarts在线免费图表

 
            option = {
    title: {
      text: '区内对比-工业亩均产值',
      left: '10',
      top:"20",
      // padding: [10, 0, 0, 50],
      textStyle: {
        // color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 600,
        // padding: [0, 0, 0, 35]
      },
    },

    tooltip: {
      trigger: 'axis',
      borderWidth: 0,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        color: "rgba(212, 232, 254, 1)",
        // fontSize: fontChart(0.24),
      },
      confine: true
    },
    grid: {
      top: '25%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      data: ['计划投资额(万元)', '实际投资额(万元)','欠费(万元)'],
      left: "center",
      top: 30,
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 15,
      borderRadius: 4,
      textStyle: {
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 400,
      },
    },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4'],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#ECECEC'
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        show: true,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: '#666666'
        }
      },
    },

    yAxis: [{
      name: '（亩）',
      nameTextStyle: {
        color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 600,
        padding: [10, 0, 0, -30]
      },
      nameGap: 25,  // 表现为上下位置
      type: 'value',
      //max:'5000',
      axisLine: {
        show: false,
        lineStyle: {
          color: '#666666',
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ECECEC'
        }
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: '#393939',
          fontSize: 12
        }
      }
    }, {
        type: "value",
        name: "同比",
        nameTextStyle: {
          color: "#ebf8ac"
        },
        position: "right",
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          formatter: "{value} %", //右侧Y轴文字显示
          textStyle: {
            color: "#ebf8ac"
          }
        }
      }],
    series: [{
      name: '计划投资额(万元)',
      type: 'bar',
      barWidth: '25',
      emphasis: {
        focus: 'series'
      },
      barGap: 0,
      itemStyle: {
        normal: {
          color: (params) => {
            return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 1, color: '#4178fb' },
                  { offset: 0, color: '#4178fb10' },
                ],
                false
            )
          },
        },
      },
      data: [3000, 2000, 1500, 2500,]
    },

      {
        name: '实际投资额(万元)',
        type: 'bar',
        barWidth: '25',
        itemStyle: {
          normal: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 1, color: '#d98861' },
                    { offset: 0, color: '#d9886110' },
                  ],
                  false
              )
            },
          },
        },
        data: [4000, 3800, 4200, 3800,]
      },
      {
        name: '欠费(万元)',
        type: 'bar',
        barWidth: '25',
        itemStyle: {
          normal: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 1, color: '#41bfce' },
                    { offset: 0, color: '#41bfce10' },
                  ],
                  false
              )
            },
          },
        },
        data: [2200, 2800, 3800, 2900]
      },
      {
        name: "供应商占比",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 10, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#058cff"
        },
        lineStyle: {
          color: "#058cff"
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#477BFF'
                },
                {
                  offset: 0.3,
                  color: '#477BFF'
                },
                {
                  offset: 1,
                  color: 'transparent'
                }
              ],
              false
          )
        },
        data: [4000, 3800, 4200, 3800]
      }
    ]
  }