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

这篇具有很好参考价值的文章主要介绍了修改echarts的tooltip样式折线图如何配置阴影并实现渐变色和自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

图片展示
修改echarts的tooltip样式折线图如何配置阴影并实现渐变色和自适应,echarts,javascript,前端

一、引入echarts

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

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

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

三、定义方法代码如下

// 折线图
    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 = `<div style="width: 141px;height: 72px;background: linear-gradient(303deg, rgba(253,254,255,0.60) -3%, rgba(244,247,252,0.60) 83%);opacity: 1;box-shadow: 0px 10px 20px 0px rgba(167, 200, 255, 0.5),inset 0px -2px 12px 0px rgba(229, 237, 250, 0.5),inset 0px 2px 6px 0px rgba(229, 237, 250, 0.9);">
            <div style="padding-left: 6px;padding-top: 10px;">
              <span style="width: 33%;font-size: 12px;line-height: 20px;height: 20px;color:#1D2129;font-weight: 700;">${datetime}</span>
              <div style="width: 125px;height: 32px;border-radius: 4px;opacity: 1;background: rgba(255, 255, 255, 0.8);box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);display: flex;justify-content: space-evenly;align-items: center;">
                <span style="font-size: 12px;color: #4E5969;">专题图数量</span>
                <span style="font-size: 13px;color: #1D2129;font-weight: 700;font-style: italic;">${datanum}</span>
              </div>
            </div>
          </div>`;
          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();
      })
    },