Echarts在线免费图表

 
            var data1 = [84, 65, 72, 95, 120, 110]
var data2 = [20, 15, 30, 45, 60, 95]
option = {
  backgroundColor: '#0e2147',
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(17,95,182,0.5)',
    textStyle: {
      color: "#fff"
    },
    formatter: function (params) {
      return params[1].marker + '' + params[1].name + '\n' +
        "<div>" +
        "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
        "<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
        "</div>" +
        "<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
        '' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
    }
  },
  grid: {
    left: '12%',
    right: '12%',
    top: '25%',
    bottom: '12%'
  },
  xAxis: {
    data: ['草堂镇', '白帝镇', '朱衣镇', '康乐镇', '永乐镇', '安坪镇'],
    show: true,
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: '#2D4377',
        opacity: 1
      }
    },
    // lineStyle: {
    //     show: true,
    //     type: 'solid'
    // },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: 'rgba(255,255,255,0.8)',
        fontSize: 14
      },
      margin: 12 // 刻度标签与轴线之间的距离。
    }

  },
  yAxis: [{
    min: 0,
    max: 150,
    name: '(万亩)',
    nameTextStyle: {
      align: 'left',
      color: 'rgba(255,255,255,0.8)',
      padding: [0, 0, 0, -20],
      fontSize: 14
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#2D4377',
        opacity: 0.5
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#2D4377',
      }
    },
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.8)',
        fontSize: 14
      }
    }
  }, {
    show: true,
    name: '(万户)',
    nameTextStyle: {
      align: 'left',
      color: 'rgba(255,255,255,0.8)',
      padding: [0, 0, 0, 10],
      fontSize: 14
    },
    splitLine: { show: false },
    axisLine: { show: true },
    axisTick: { show: false },
    axisLabel: {
      textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' }
    }
  }],
  legend: {
    top: '5%',
    left: '50%',
    textStyle: {
      color: '#fff',
      fontSize: 14
    },

    itemGap: 12 // 设置间距
  },
  series: [
    { // 三个最低下的圆片
      'name': '',
      'type': 'pictorialBar',
      'symbolSize': [20, 10],
      'symbolOffset': [0, 2],
      'z': 12,
      itemStyle: {
        opacity: 1,
        color: function (params) {
          var a = params.name.slice(0, 2)
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#12B9DB' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#007AFF' // 100% 处的颜色
          }], false)
        }
      },
      'data': [0.5, 0.5, 0.5, 0.5, 0.5, 0.5]
    },

    // 下半截柱状图
    {
      name: '种植面积',
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      itemStyle: { // lenged文本
        opacity: 0.7,
        color: function (params) {
          var a = params.name.slice(0, 2)
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#12B9DB' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#007AFF' // 100% 处的颜色
          }], false)
        }
      },

      data: data1
    },

    {
      'name': '',
      'type': 'pictorialBar',
      'symbolSize': [20, 12],
      'symbolOffset': [0, -4],
      'z': 5,
      itemStyle: {
        opacity: 1,
        color: function (params) {
          var a = params.name.slice(0, 2)

          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#12B9DB' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#007AFF' // 100% 处的颜色
          }], false)
        }
      },
      'symbolPosition': 'end',
      'data': data1
    },
    {
      name: '农户数',
      'z': 9,
      yAxisIndex: 1,
      type: 'line',
      data: data2,
      //symbol: '',
      symbolSize: '9',
      lineStyle: {
        normal: {
          width: 3,
          color: '#FF9B61' // 线条颜色
        },
        borderColor: '#FF9B61'
      },

    },
    {
      "name": "", //头部
      "type": "pictorialBar",
      "symbolSize": [20, 10],
      "symbolOffset": [0, -5],
      "z": 12,
      "symbolPosition": "end",
      itemStyle: {
        color: '#1E44B8',
        opacity: 1,
      },
      "data": [150, 150, 150, 150, 150, 150]
    },
    {
      name: '',
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      z: 0,
      itemStyle: {
        color: '#163F7A',
        opacity: .7,
      },
      data: [150, 150, 150, 150, 150, 150]
    }
  ]
}

// option && myChart3.setOption(option);
// if (option && typeof option === "object") {
//     myChart3.setOption(option, true);
//     refreshChart(myChart3,option);
//     var index3 = 0; //播放所在下标
//     var mTime = setInterval(function () {
//             myChart3.dispatchAction({
//                 type: 'showTip',
//                 seriesIndex: 0,
//                 dataIndex: index3
//             });
//             index3++;
//             if (index3 >= 6) {
//                 //console.log('data4', fxdata.length)
//                 index3 = 0;
//                 //console.log(fxdata)
//             }
//     }, 2600);
// }