Echarts在线免费图表

 
            option = {
   grid: {
      left: '8%',
      right: '5%',
      bottom: 50,
      top: 10,
      containLabel: true,
   },
   tooltip: {
      trigger: 'axis', //axis , item
      // backgroundColor: 'RGBA(0, 49, 85, 1)',
      // borderColor: 'rgba(0, 151, 251, 1)',
      // textStyle: {
      //    color: '#BCE9FC',
      //    // fontSize: this.$fontSize(0.16),
      //    align: 'left',
      // },
      // formatter: function (params) {
      //    return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value;
      // },
   },
   // backgroundColor: '#002D54',
   xAxis: {
      type: 'value',
      splitLine: {
         lineStyle: {
            color: 'rgba(77, 128, 254, 0.2)',
            type: 'line',
         },
      },
      axisTick: {
         show: true,
      },

      axisLabel: {
         //  改变x轴字体颜色和大小
         show: true,
         textStyle: {
            color: '#00c0fa',
            fontSize: 16,
         },
      },
   },
   yAxis: [
      {
         type: 'category',
         inverse: true,
         axisLabel: {
            show: true,
            textStyle: {
               color: '#2a77ea',
               fontSize: '16',
            },
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
         data: ['泉山区', '鼓楼区', '贾汪区', '丰县', '沛县', '新沂市'],
      },
   ],
   series: [
      {
         name: '道路指数',
         type: 'bar',
         zlevel: 1,
         label: {
            show: true,
            position: 'right', // 位置
            color: '#00c0fa',
            fontSize: 14,
            distance: 10 // 距离
            // formatter: '{c}%' // 这里是数据展示的时候显示的数据
         }, // 柱子上方的数值
         itemStyle: {
            normal: {
               barBorderRadius: 0,
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                     offset: 0,
                     color: '#2a77ea',
                  },
                  {
                     offset: 1,
                     color: '#00c0fa',
                  },
               ]),
            },
         },
         barWidth: 20,
         data: [270, 189, 157, 112, 89, 78],
      },
   ],
};