Echarts在线免费图表

 
            let data1 = [
   {
      name: '1',
      value: 25,
   },
   {
      name: '2',
      value: 83,
   },
   {
      name: '3',
      value: 125,
   },
   {
      name: '4',
      value: 145,
   },
   {
      name: '5',
      value: 528,
   },
];
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = ['#db753e', '#0c8aff', '#ffea8a', '#37ffc9', '#19d6ff'];
let barBottomColor = [
   '#db753e30',
   '#0c8aff30',
   '#ffea8a30',
   '#37ffc930',
   '#19d6ff30',
];
data1.forEach((item) => {
   xAxisData.push(item.name);
   seriesData1.push(item.value);
   sum += item.value;
});
option = {
   backgroundColor: '#000',
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
   },
   legend: {
      show: false
   },
   grid: {
      top: '20%',
      bottom: '100',
      left: '50',
      right: '100',
      containLabel: false,
   },
   xAxis: {
      data: xAxisData,
      axisLine: {
         show: true,
         textStyle: {
            color: "#019bdd",
         },
         lineStyle: {
            color: "#019bdd", //刻度线的颜色
         },
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "#fff",
         fontSize: 14,
         formatter: function (value) {
            var str = "";
            var num = 4; //每行显示字数
            var valLength = value.length; //该项x轴字数
            var rowNum = Math.ceil(valLength / num); // 行数

            if (rowNum > 1) {
               for (var i = 0; i < rowNum; i++) {
                  var temp = "";
                  var start = i * num;
                  var end = start + num;

                  temp = value.substring(start, end) + "\n";
                  str += temp;
               }
               return str;
            } else {
               return value;
            }
         },
      },
   },
   yAxis: [{
      type: 'value',
      // name: '件',
      nameTextStyle: {
         color: '#FFFFFF',
         fontSize: 12,
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "#064e78",
         },
      },
      axisLine: {
         show: true,
         textStyle: {
            color: "#019bdd",
         },
         lineStyle: {
            color: "#019bdd", //刻度线的颜色
         },
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         color: "#fff",
         fontSize: 14,
      },
   }],
   series: [
      {
         // name: '柱顶部',
         type: 'pictorialBar',
         symbolSize: [26, 10],
         symbolOffset: [0, -5],
         z: 12,
         itemStyle: {
            normal: {
               color: function (params) {
                  return barTopColor[params.dataIndex];
               },
            },
         },
         label: {
            show: true,
            position: 'top',
            fontSize: 16,
         },
         symbolPosition: 'end',
         data: seriesData1,
      },
      {
         name: function (params) {
            return barTopColor[params.name];
         },
         type: 'pictorialBar',
         symbolSize: [26, 10],
         symbolOffset: [0, 5],
         z: 12,
         itemStyle: {
            normal: {
               color: function (params) {
                  return barTopColor[params.dataIndex];
               },
            },
         },
         data: seriesData1,
      },
      {
         type: 'bar',
         itemStyle: {
            normal: {
               color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                        offset: 0,
                        color: barTopColor[params.dataIndex],
                     },
                     {
                        offset: 1,
                        color: barBottomColor[params.dataIndex],
                     },
                  ]);
               },
               opacity: 0.8,
            },
         },
         z: 16,
         silent: true,
         barWidth: 26,
         barGap: '-100%', // Make series be overlap
         data: seriesData1,
      },
      {
         'z': 9999,
         type: 'line',
         name: "党员责任区",
         data: seriesData1,
         symbolSize: '0',
         lineStyle: {
            normal: {
               width: 3,
               color: '#02f8f0' // 线条颜色
            },
         },

      },
   ],
};