Echarts在线免费图表

 
            
var name = ['任城区', '兖州区', '微山县', '鱼台县', '金乡县', '嘉祥县', '汶上县', '泗水县', '梁山县', '济宁高新区', '太白湖新区', '经济开发区', '曲阜市', '邹城市']
var data = [
  {
    name: '任城区',
    value1:15,
    value2:40
  },
  {
    name:'兖州区',
    value1:18,
    value2:41
  },
  {
    name:'微山县',
    value1:20,
    value2:77
  },
  {
    name:'鱼台县',
    value1:25,
    value2:115
  },
  {
    name:'金乡县',
    value1:35,
    value2:137
  },
  {
    name:'嘉祥县',
    value1:30,
    value2:75
  },
  {
    name:'汶上县',
    value1:22,
    value2:188
  },
  {
    name:'泗水县',
    value1:26,
    value2:62
  },
  {
    name:'梁山县',
    value1:12,
    value2:165
  },
  {
    name:'济宁高新区',
    value1:8,
    value2:23
  },
  {
    name:'太白湖新区',
    value1:11,
    value2:12
  },
  {
    name:'经济开发区',
    value1:13,
    value2:16
  },
  {
    name:'曲阜市',
    value1:24,
    value2:60
  },
  {
    name:'邹城市',
    value1:22,
    value2:52
  },
]


let option = {
  backgroundColor: '#333',
  xAxis: {
    splitLine: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      textStyle: {
        color: '#fff',
      },
    },
    formatter: function (params) {
      return params[0].name + '<br>'
        + params[0].marker + '' + params[0].seriesName + '：' + + params[0].value + '亿元' + '<br>'
        + params[1].marker + '' + params[1].seriesName + '：' + params[1].value + '亿元' + '\n'
    }
  },
  grid: {
    left: 80,
    top: 20,
    right: 50,
    bottom: 20
  },
  yAxis: [
    {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#fff',
        fontSize: 14,
      },
      position: 'left',
      data: ['任城区', '兖州区', '微山县', '鱼台县', '金乡县', '嘉祥县', '汶上县', '泗水县', '梁山县', '济宁高新区', '太白湖新区', '经济开发区', '曲阜市', '邹城市'],
    },
  ],
  series: [
    {
      // 背景样式
      name: '背景',
      type: "pictorialBar",
      barWidth: 10,
      // barHeight: 10,
      stack: '总量',
      barGap: '-100%',
      symbol: 'fixed',
      symbolRepeat: 'repeat',
      legendHoverLink: false,
      itemStyle: {
        normal: {
          color: 'rgba(64, 91, 184, 0.35)'
        },

      },
      label: {
        show: true,
        position: "outside",
        fontWeight: "bolder",
        align: "left",
        offset: [30, 0],
        formatter: (p) => {
          var name = data.filter(item => { return p.name == item.name })[0]
          return `{a|${name.value1}}{c|/}{b|${name.value2}}`
        },

        rich: {
          a: {
            color: '#07D1FA',
            fontSize: 20,
          },
          b: {
            color: '#B0DEF5',
            fontSize: 20,
          },
          c: {
            color: '#fff',
            fontSize: 20,
          },
        }
      },
      data: [40, 41, 77, 115, 137, 75, 188, 62, 165, 23, 12, 16, 60, 52],
      symbolSize: [10, 25],
      symbolMargin: 5,
      animation: false, //关闭动画
      z: 0
    },
    {
      name: 'info',
      type: "pictorialBar",
      barWidth: 10,
      legendHoverLink: false,
      itemStyle: { //lenged文本
        opacity: 1,
        color: function (params) {
          return new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
            offset: 0,
            color: 'rgba(48, 147, 238, 1)' // 0% 处的颜色
          }, {
            offset: 1,
            color: 'rgba(14, 212, 255, 1)' // 100% 处的颜色
          }], false)
        }
      },
      silent: true,
      symbolRepeat: 'fixed',
      symbolMargin: 5,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [10, 25],
      symbolPosition: 'start',
      symbolOffset: [0, 0],
      data: [15, 18, 20, 25, 35, 30, 22, 26, 12, 8, 11, 13, 24, 22],
      z: 1,
    },
  ]
};