echarts双折线图自定义tooltips样式

自定义双折线图样式

x轴标签为19，自定义样式更改为年月日

tooltip: {trigger: 'axis',formatter: params => {let resultData = params[0]let outputData = params[1]let resultDate = this.trendInfoList.dateInfoList[resultData.dataIndex]let dateInfo = resultDate.split('-')[0] + '年' + resultDate.split('-')[1] + '月' + resultDate.split('-')[2] + '日'let tipsHtml = `<div style="width:fit-content"><div style="margin-bottom:6px">${dateInfo}</div><div style="display:flex;margin-bottom:2px"><div><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:${resultData.color}"></span></div><div style="padding:0 16px 0 6px;width:auto">战果实例数</div><div style="text-align:right;color:rgb(102,102,102);font-weight:700;flex:1">${resultData.value}</div></div><div style="display:flex;"><div><span style="width:10px;height:10px;border-radius: 50%;display:inline-block;background-color:${outputData.color}"></span></div><div style="padding:0 16px 0 6px;width:auto">输出数据量</div><div style="text-align:right;color:rgb(102,102,102);font-weight:700;flex:1">${outputData.value}</div></div></div>`return tipsHtml}

echarts双折线图自定义tooltips样式相关推荐

雷达图自定义点样式渐变背景色
雷达图的自定义点样式与渐变背景色 1.首先通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head><me ...
Echarts 实现折线图自定义折点样式
<script>....export default {name: "LineChart",...data:function () {return{series:[]} ...
Echarts雷达图自定义样式
效果图: setLeiDaChart(){let myChart = this.$echarts.init(document.getElementById('andonType'));let opti ...
echarts雷达图自定义射线颜色、边框效果和背景样式
目录 1.在官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比 1.在官网找样例样例地址:Examples - Apache ECharts 2.初 ...
echarts折线图、echarts折线图自定义样式
html 页面引用js <script type="text/javascript" src="assets/js/echarts.min.js"> ...
echarts雷达图线的样式_echarts 雷达图的个性化设置
functiontest() { let myChart= echarts.init(document.getElementById('levelImage')); myChart.setOption ...
Echarts环形图自定义图例
项目场景: 在展示图表的时候有的时候需要图例也展示出一些内容来,例如这样子: 描述普通的图例一般只是这样但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter 解决方案: ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...
echarts 水球图自定义水球颜色
项目中有一个水球图表示电池电量的需求:电量20%以下时显示红色,20%-30%时显示为黄色,30%以上显示蓝色 var option = {series: [{type: 'liquidFill',d ...

echarts双折线图自定义tooltips样式

echarts双折线图自定义tooltips样式相关推荐

最新文章

热门文章