修改echarts的tooltip样式 折线图如何配置阴影并实现渐变色和自适应

图片展示

一、引入echarts

这里不用多解释
vue里使用
import echarts from “echarts”;
html页面引用js文件或用script标签引用

二、定义一个具有宽高的dom div

   <div id="echart-broken" style="width:400px;height: 200px;"></div>
1

三、定义方法 代码如下

// 折线图
    brokenInit(){
       var chart4 = echarts.init(document.getElementById('echart-broken'));
        chart4.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          axisPointer: { // 添加辅助线
          type: 'line',
          lineStyle: {
            color: '#4080FF', // 修改竖线颜色
            type: 'dashed', // 修改竖线样式为虚线
            width: 1.5
          },
        },
        formatter: function(params) {
          var datetime = params[0].axisValue;
          var datanum = params[0].data;
          var res = `

            

              ${datetime}
              

                专题图数量
                ${datanum}
              
            
          `;
          return res;
        }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 和0刻度线对齐方式
          data: this.brokenDate.map(item => item.name),
          axisLine: { // 修改X轴线的样式
             lineStyle: {
              color: '#E5E8EF' // 将x轴颜色改为浅灰色
            }
          },
          axisLabel: {
            color: '#86909C' // 设置x轴刻度上的数据颜色为黑色
          },
          axisTick: {
            show: false
          },
          splitLine: { // 设置分隔线样式
          show: true,
          lineStyle: {
            color: '#E5E8EF',
            type: 'dashed', // 修改竖线样式为虚线
          }
        },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E5E8EF' // 将Y轴颜色改为浅灰色
            }
          },
          axisLabel: {
            color: '#86909C' // 设置Y轴刻度上的数据颜色为黑色
          },
          axisTick: {
            show: false
          },
          splitLine: { // 设置分隔线样式
          show: true,
          lineStyle: {
            type: 'dashed', // 改成虚线
            color: '#E5E8EF'
          }
        },
        },
        color: '#249AFF',
        series: [
          {
            data: this.brokenDate.map(item => item.value),
            type: 'line',
            smooth: true,
            lineStyle: { // 设置折线样式
              width: 3 // 设置折线宽度
            },
            symbol: 'none', // 去除小圆点
            areaStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                {
                  offset: 0,
                  color: "rgba(17, 126, 255, 0.5)" // 0% 处的颜色，深一点
                },
                {
                  offset: 0.7,
                  color: "rgba(17, 128, 255, 0.1)" // 90% 处的颜色，浅一点
                },
                {
                  offset: 1,
                  color: "rgba(17, 128, 255, 0)" // 100% 处的颜色，完全透明
                }
              ],
                globalCoord: false // 默认为 false
              }
            }
          }
          }
        ]
      })
      // 自适应
        window.addEventListener("resize", () => {
        chart4.resize();
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

tooltip里的 模板字符串 dom结构 前端不方便调试效果图

可以先在dom里写好，调试好效果之后 在复制粘贴到 tooltip里的模板字符串

配置阴影和渐变色 在series里配置
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:[]
即可
具体代码在代码块里