Echarts在线免费图表

 
            
option = {
   backgroundColor: 'rgba(39,46,74)',
   tooltip: {
      trigger: 'item',
   },
   grid: {
      left: '5%',
      top: '10%',
      right: '5%',
      bottom: '10%',
   },
   xAxis: [{
      data: ["监测中心站", "调查中心", "核与辐射安全中心", "宣传教育中心"],
      axisLabel: {
         textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
         },
         margin: 30, //刻度标签与轴线之间的距离。
      },

      axisLine: {
         show: true, //不显示x轴
         lineStyle: {
            color: 'rgba(53,65,95,1)',
         }
      },
      axisTick: {
         show: false //不显示刻度
      },
      boundaryGap: true,
      splitLine: {
         show: false
      }
   }],
   yAxis: [{
      splitLine: {
         show: true,
         lineStyle: {
            color: 'rgba(53,65,95,1)',
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         textStyle: {
            color: 'rgba(122,173,212,1)',
            fontSize: 14
         },
      }
   }, {
      type: "value",
      nameTextStyle: {
         color: "#fff",
         fontSize: 20,
         padding: [0, 0, 10, 30],
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: "#84929f",
         },
      },
      // splitNumber: 5,
      splitLine: {
         show: true,
         lineStyle: {
            type: "dashed",
            width: 1,
            // 使用深浅的间隔色
            color: ["#566471", "#566471"],
         },
      },
      axisLabel: {
         show: true,
         fontSize: 20,
         color: "#fff",
         margin: 10,
      },
   }],
   series: [
      {
         name: "同比",
         type: "line",
         yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
         smooth: true, //平滑曲线显示
         symbol: "circle", //标记的图形为实心圆
         symbolSize: 0, //标记的大小
         itemStyle: {
            // normal: {
            color: "rgba(24,225,255,1)",
            borderColor: "rgba(24,225,255,1)", //圆点透明 边框
            borderWidth: 0,
            lineStyle: {
               color: "rgba(24,225,255,1)",
            },
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 0,
                     color: "rgba(24,225,255,0.3)",
                  },
                  {
                     offset: 0.6,
                     color: "rgba(24,225,255,0)",
                  },
               ],
               false
            ),
            shadowColor: "rgba(24,225,255,0.9)",
            // shadowBlur: 20,
         },
         data: ["30", "35", "25", "13"],
      },
      {
         name: "环比",
         type: "line",
         yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
         smooth: true, //平滑曲线显示

         symbol: "circle", //标记的图形为实心圆
         symbolSize: 0, //标记的大小
         itemStyle: {
            // normal: {
            color: "rgba(194,170,249,1)",
            borderColor: "rgba(194,170,249,1)", //圆点透明 边框
            borderWidth: 0,
            lineStyle: {
               color: "rgba(194,170,249,1)",
            },

            // },
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                  offset: 0,
                  color: "rgba(194,170,249,0.3)",
               },
               {
                  offset: 0.6,
                  color: "rgba(194,170,249,0)",
               },
            ]),
         },
         data: ["50", "75", "105", "-130"],
      },
      //柱体
      {
         name: "",
         type: "pictorialBar",
         barWidth: 43,
         yAxisIndex: 1,
         symbolOffset: [0, 0],
         yAxisIndex: 0,
         symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         itemStyle: {
            normal: {
               //渐变色
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#f3de2340"
               },
               {
                  offset: 1,
                  color: "#f3de2380"
               }
               ])
            }
         },
         label: {
            normal: {
               show: true,
               position: "top",
               textStyle: {
                  color: "#f3de23",
                  fontSize: 14
               }
            }
         },
         data: ["50", "75", "105", "130"]
      },
      //柱底圆片
      {
         name: "",
         type: "pictorialBar",
         symbolSize: [43, 20],//调整截面形状
         symbolOffset: [0, 10],
         barWidth: 43,
         z: 12,
         yAxisIndex: 0,
         itemStyle: {
            "normal": {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#f3de23"
               },
               {
                  offset: 1,
                  color: "#f3de23"
               }
               ], false)
            }
         },
         data: ["50", "75", "105", "130"]
      },

   ]
};