Echarts在线免费图表

 
             var bottom1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAYAAABqpJ3BAAAD+0lEQVRYhc2YQY8VRRDHfz0zu+5DFjVoAgFBwiZrVi+eJHBhIcYziYGEg0e4EPwGnvATeCImJh69ePHg0XDYGCKJF2Q1bEB2FwjJCsRldx/73rzm0N3PevW65828hYR/Munpqurqqurq7poxc0s2AwxgcQjvkobgGaDnWwktK8dofSndQU/m21HjTCGMMmJgUJQrJeZ2l4MduAocA65PGi7O5CxXGJZygltdfgWYK5gXhgfEjNZ6egVQAm8Qj6im0YHvgFO+e3rb8j3wecToUQj6DS5QVTKxMRboFJ7RAyYZ9E6uBuL9UzXJMaDwOjIG00sbMJB+cwWfeXpBZIVIrwLAdhgI0MGtgo7E0CoY+N3CSdG/7g0Pyy/TIOWEjmqM3vP2hMAEWj/6erJtPyDzjuXAhHjPgGyP4SsD14BNA9emDZc8L/eymXgkLRdtruYqlFzh5858q+3q9KMxtzSw594hnY+vC0rgSegUirkFvEU8HyuPM9/qPA201LGZ4lXNsS6FtANtYDduQ0uDJGIbNZajYdLQ1wdET/Dle9CTKX0Z8Nw/SQcAngHvCQOkI6GfJfh6AweZWPTlHSMvU9nPlI5nWnnMgTZuk7QivFFIpcPLwBbOtgHEHAB4Cky/IkPGxdMYMbbk4DzdZPjIk61R/Hy5ZH6xy8Jil4XlknniR2fVk5LdJBJ9SK8AwBrwNuoi+6vLDwAfFnwpyAZgw3LF+v2zYbnC/yXHQD2l5omWLIIXbImiyoHnwH/AXkUPp8VEZIw0JFw8O8Vj1MkzMKG6yDQmgY9Ip9qArtWS4+uWr4Fy2vDNwZyFRqYOwwI38XVPdNIRDgAcBvYnlNfFqIst9W3xCPinSnGdJX6AcyCUGDJn5Xuskkzx9EdRbB+UwP1RxtVxoAM8BD6oIZsyJoZYQCTuI4q2FOrkNsAqLmKycgxHXKGeiQhNjimA4k7JhVtdfrlTcjEiY/2cI1HXgRK4JwwIpXZ4csWTjsnzvC/btpwFWm3LmYjee0D3ZToALiJdhqMcavaJCK9Q9L7jLcNPQLtl+FnJdICVukbVOYUkDgGfxPSoflWpLekxuT9wK1ALTS+aFWAWVyfJUrjqW7jJCbQO/T8ctdDUAQssAicELVdtHaRkF2lYzY5z1a/iKsN3Adu27NuyzJTwfgkHeq70mOpZdgFTAAbaxriCLIO1HB7ksDJluN0yPHIi/EuD3A9ougcC9q9bLm9YzvUsR8ZREJAZ7r5p+HHa8C3u0mwEY+143x/mbx4C+8YaPIzHdnaoaKyFJseoxnngxg7GB9wAvhh38E5WIOAocBxXtX4MHMHtj93ALi+zifueXQPu4irMP4HfgCUAOzuWGbwAtU4rt2uO5/4AAAAASUVORK5CYII="
 var iconData = []
//  let barBottomColor = ["#D09311", "#279AB0", "#0B5FFF", '#154AD2', '#670BFF', '#90222D',"#CBB835", "#33C6E2", "#16B5FF", '#157FFE', '#8F48F0', '#CD597A', '#8F48F0', '#CD597A'];

const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x, shape.y];
        const c1 = [shape.x - 9, shape.y - 9];
        const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
        const c3 = [xAxisPoint[0], xAxisPoint[1]];
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    },
});
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y];
        const c2 = [xAxisPoint[0], xAxisPoint[1]];
        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
        const c4 = [shape.x + 18, shape.y - 9];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
});
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y];
        const c2 = [shape.x + 18, shape.y - 9];
        const c3 = [shape.x + 9, shape.y - 18];
        const c4 = [shape.x - 9, shape.y - 9];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
});
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);

const VALUE1 = [120, 200, 150, 80, 70, 110, 130, 240, 80, 100, 12, 40, 120,133];
VALUE1.forEach((item, index) => {
          iconData.push({
            value:item,
            symbol:  "image://" + bottom1 ,
          })
        })

option = {
    backgroundColor: '#000',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            textStyle: {
                color: '#fff',
            },
        },
    },
    grid: {
        left: '2%',
        right: '2%',
        bottom: '4%',
        top: '5%',
        containLabel: true,
    },
    xAxis: {
        data: ['岗位大练兵', '业务大比拼', '关爱留守老人', '关爱留守儿童', '关爱留守妇女', 
        '关爱特殊群体','岗位大练兵', '业务大比拼', '关爱留守老人', '关爱留守儿童', '关爱留守妇女', 
        '关爱特殊群体','岗位大练兵','岗位大练兵'],
        
        axisLine: {
            
            show: true, //隐藏X轴轴线
            lineStyle: {
                color: '#11417a',
            },
        },
        axisTick: {
            show: false, //隐藏X轴刻度
        },
        axisLabel: {
            fontSize: 24,
            rotate: 40,
            show: true,
            textStyle: {
                color: '#89C3DD', //X轴文字颜色
            },
        },
    },
    yAxis: [
        {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#11417a',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: [5, 10],
                    dashOffset: 10,
                    color: '#0f68a0',
                },
            },
            axisLabel: {
                fontSize: 24,
                color: '#89C3DD',
            },

            axisTick: {
                show: false,
            },
        },
    ],
    series: [
        // {
        //     type: 'bar',
        //     barMaxWidth: 20,
        //     itemStyle: {
        //         color: '#86dfbb',
        //     },
        //      label: {
        //             normal: {
        //               show: true,
        //               position: 'top',
        //               formatter: (e) => {
        //                 return e.value + '辆';
        //               },
        //               fontSize: 26,
        //               color: '#fff',
        //               offset: [4, -10],
        //             },
        //           },
        //     data: VALUE1,
        // },
    {
         type: "custom",
         renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
               type: "group",
               children: [
                  //左侧
                  {
                     type: "CubeLeft",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: "#40fbeb",
                     },
                  },
                  //右侧
                  {
                     type: "CubeRight",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: "#25dbc9",
                     },
                  },
                  //顶部
                  {
                     type: "CubeTop",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: "#84fffb",
                     },
                
                  },
               ],
            };
         },
         
         data: VALUE1,
      },

        
        {
      type: 'line',

//折线渐变色
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: 'rgba(183, 75, 238)'
          },
          {
            offset: 1,
            color: 'rgba(250, 207, 18)'
          }
        ])
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: 'rgba(183, 75, 238,0.2)'
          },
          {
            offset: 1,
            color: 'rgba(250, 207, 18)'
          }
        ])
      },
      data:VALUE1
    },

        {
              type: 'pictorialBar',
              label: {
                normal: {
                  show: true,

                      formatter: (e) => {
                        return e.value + '辆';
                      },
                    //   offset: [4, -10],


                  position: 'top',
                  distance: -5,
                  fontSize: 25,
                  color: '#fff',
                  fontWeight:'bold',
                  // offset: [2, -25]
                }
              },
              tooltip: {},
              z: 2,
              symbolPosition: 'end',
              symbolSize:[100,25],
              symbolOffset: [5, '-35'],
              itemStyle: {
                shadowColor: 'rgba(0,0,0,.3)',
                shadowBlur: 50,
                shadowOffsetY: 1,
                shadowOffsetX: 1,
              },
              data:iconData
            },
    ],
};