Echarts在线免费图表

 
            var captions = ['一季度', '二季度', '三季度', '四季度'];
var values = ['81', '65', '76', '84'];

var option = {
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: 'none'
      },
      position: function (point, params, dom, rect, size) { // 提示框位置
         let x = 0;
         let y = 0;
         if (point[0] + size.contentSize[0] + 10 > size.viewSize[0]) {
            x = point[0] - size.contentSize[0] - 10
         } else {
            x = point[0] + 10
         }
         if (point[1] + size.contentSize[1] + 10 > size.viewSize[1]) {
            y = point[1] - size.contentSize[1] - 10
         } else {
            y = point[1] + 10
         }
         return [x, y];
      },
      formatter: params => {
         console.log(params)
         const {
            name, 
            data,
         } = params[0];
         return `
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</div>
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">销售金额${data} 元</div>
         `
           
      },
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   xAxis: {
      type: 'category',
      data: captions,
      axisTick: {
         show: false //隐藏X轴刻度
      },
      axisLine: {
         lineStyle: {
            color: "#CCCCCC"
         }
      },
      axisLabel: {
         show: true,
         textStyle: {
            color:  'rgba(0,0,0,0.65)', 
            fontSize: 14,
            fontFamily:'Source Han Sans CN-Regular',
         }
      },
   },
   yAxis: [{
	   type:'value',
      name: "单位：元",
      nameTextStyle: { 
         color: 'rgba(0,0,0,0.65)', 
         fontSize: 14,
         fontFamily: 'Source Han Sans CN-Regular',
         align: "left",
         verticalAlign: "center",
      },
      axisLabel: {
         color: 'rgba(0,0,0,0.65)',
         textStyle: {
            fontSize: 14
         },
      },
      axisLine: {
         show: false,
         lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
         }
      },
      axisTick: {
         show: false
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
            type: "dashed",
         }
      }
    }],
   series: [{
      type: 'line',
      data: values,
      symbolSize: 8, //标记的大小
      areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(116,160,249,0.15)' // 0% 处的颜色
         }, {
            offset: 1,
            color: 'rgba(29,63,120,0)' // 100% 处的颜色
         }], false),
      },
      lineStyle: {
         color: "#5B8FF9",
         width: 3,
         shadowColor: 'rgba(26,117,218,0.17)',//设置折线阴影
         shadowBlur: 5,
         shadowOffsetY: 9,
      },
      itemStyle: {
         //折线拐点标志的样式
         color: "#5B8FF9",
         borderColor: "#5B8FF9",
         borderWidth: 5,
      },
      smooth: 0.4,
      emphasis: {
         scale:1.5
      }
   }]
};