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

图片展示

一、引入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();})},

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

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

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