Echarts在线免费图表

 
            option = {
   backgroundColor: "#21263A",
   color: ["#ffc20e", "#00ae9d"],
   grid: {
      top: "5%",
      left: "2%",
      right: "5%",
      bottom: "5%",
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(61, 85, 102, 0.2)",
      borderWidth: 1,
      borderColor: "#9DBAE1", // 边框颜色
      // 选中线颜色
      axisPointer: {
         lineStyle: {
            color: "#9DBAE1"
         }
      },
      // 字体颜色
      textStyle: {
         color: "#fff",
         fontSize: 10
      }
   },
   legend: {
      right: "3%",
      icon: "circle",
      itemWidth: 8,
      itemGap: 20,
      textStyle: {
         padding: [0, 0, 0, 5]
      }
   },
   xAxis: [
      {
         type: "category",
         boundaryGap: false,
         axisLabel: {
            color: "#33a3dc",
            fontSize: 18
         },
         axisLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)"
            }
         },
         data: ["4月", "5月", "6月", "7月", "8月", "9月", "10月"]
      }
   ],
   yAxis: [
      {
         type: "value",
         name: "",
         axisLabel: {
            color: "#33a3dc",
            fontSize: 18
         },
         splitLine: {
            lineStyle: {
               type: "solid",
               color: "rgba(255,255,255,.1)",
               width: 1
            }
         }
      }
   ],
   series: [
      {
         name: "",
         type: "line",
         smooth: true, // 是否平滑曲线显示
         // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
         symbolSize: 0,
         lineStyle: {
            normal: {
               color: "#ffc20e" // 线条颜色
            }
         },
         areaStyle: {
            // 区域填充样式
            normal: {
               // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                     { offset: 0, color: "rgba(255,194,14, 0.8)" },
                     { offset: 1, color: "rgba(255,194,14, 0)" }
                  ],
                  false
               )
               // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
               // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
         },
         data: [20, 58, 19, 56, 86, 35, 25]
      },
      {
         name: "",
         type: "line",
         smooth: true, // 是否平滑曲线显示
         // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
         symbolSize: 0,
         lineStyle: {
            normal: {
               color: "#00ae9d" // 线条颜色
            }
         },
         areaStyle: {
            // 区域填充样式
            normal: {
               // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                     { offset: 0, color: "rgba(0,174,157, 0.8)" },
                     { offset: 1, color: "rgba(0,174,157, 0)" }
                  ],
                  false
               )
               // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
               // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
         },
         data: [40, 29, 38, 28, 43, 45, 62]
      }
   ]
};
// 其他各种图表一个原理
let index = 0;
setInterval(function () {
   // 这里的7 为x轴的长度
   if (index >= 7) {
      index = 0;
   }
   myChart.dispatchAction({
      type: "showTip", // 提示框
      seriesIndex: 0,
      dataIndex: index // 第 lightIndex 柱子高亮
   });
   index += 1;
}, 2000);