Echarts在线免费图表

 
            var obj = {
   0: '金斗营乡',
   1: '安乐镇',
   2: '西湖镇',
   3: '定水镇',
   4: '石佛镇'
};

option = {
   backgroundColor: '#061C2A',
   grid: [{
      left: "4%",
      right: "4%",
      bottom: "10%",
      height: "70%",
      containLabel: true,
   }],
   tooltip: {
      trigger: 'axis',
      borderColor: "#092B46",
      backgroundColor: "#092B46",
      textStyle: {
         color: "#ffffff",
         fontSize: 14,
         align: 'left'
      },
      axisPointer: {
         type: 'shadow',
         //鼠标选中柱子时，显示的背景高亮
         shadowStyle: {
            color: "#65A3FF",
            opacity: 0.2,
            width: "auto",
         },
      },
      formatter: function (params) {
         return params[0].name + ': ' + params[0].value;
      }
   },
   xAxis: {
      axisLabel: {
         textStyle: {
            color: '#A3CAE8',
            fontSize: 12,
            fontWeight: 700
         },
         interval: 0,//使x轴文字显示全
      },
      //x轴样式
      axisLine: {
         show: false
      },
      splitLine: {
         show: false
      },
      //轴线刻度
      axisTick: {
         show: false
      },
      data: ['光华区', '光华区', '光华区', '光华区', '光华区', '光华区', '光华区', '光华区', '光华区', '光华区'],
   },
   yAxis: {
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         show: false
      }
   },
   series: [{
      name: 'hill',
      type: 'bar',
      label: {
         show: false,
         position: 'top',
         distance: 5,
         color: '#F4FAFF',
         fontWeight: 'bolder',
         fontSize: 24
      },
      itemStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
               { offset: 0, color: "rgba(82, 180, 249, 1)" },
            ]),
         },
      },
      //图形高亮时柱子的颜色
      emphasis: {
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [{
                  offset: 0, color: '#F9E142' // 0% 处的颜色
               }, {
                  offset: 1, color: '#40523F' // 100% 处的颜色
               }],
               global: false // 缺省为 false
            },
         }
      },
      markPoint: {
         symbol: 'rect',// circle:圆形，rect:方形
         itemStyle: {
            normal: {
               label: {
                  show: true,
                  color: '#fff',
                  position: 'top',
                  color: "#00D8FE",
                  fontSize: 14,
                  formatter: function (param) {
                     // if(param.data.coord[1]>20){
                     //   return '优秀'
                     // }else if (param.data.coord[1]>10){
                     //   return '良好'
                     // } else {
                     //   return '不达标'
                     // }
                     return param.name
                  }
               },
               color: 'rgba(89, 252, 198, 0)'
            }
         },
         symbolSize: [50, 50],
         symbolOffset: [0, 24],
         // data中的数据，name字段是你想要展示的内容，coord字段中的第一个数是指第几个柱子，第二个字段是柱子的值
         data: [
            { name: 'Top1', coord: [0, 200] },
            { name: 'Top2', coord: [1, 170] },
            { name: 'Top3', coord: [2, 167] },
            { name: 'Top4', coord: [3, 150] },
            { name: 'Top5', coord: [4, 146] },
            { name: 'Top6', coord: [5, 132] },
            { name: 'Top7', coord: [6, 120] },
            { name: 'Top8', coord: [7, 115] },
            { name: 'Top9', coord: [8, 100] },
            { name: 'Top10', coord: [9, 80] },
         ],
      },
      zlevel: 11,
      barWidth: 25, //柱子宽度
      data: [200, 170, 167, 150, 146, 132, 120, 115, 100, 80], // 修改值
   }]
};