echarts多条折线图hover的时候添加单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w3cschool (www.w3cschool.cn) </title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow">
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
formatter: function(c) {
console.log( c )
let str = '';
let temp = {
bgcricle:'',//颜色
seriesName:"", //学校名
valueData:'',//数值
spacespan:'',
};
c.forEach((item) => {
// 做的事情
temp.bgcricle=item.marker;
temp.seriesName=item.seriesName;
temp.valueData=item.value+"个";
temp.spacespan='<span style="display:inline-block;width:10px;height:10px;"></span>';
str+=temp.bgcricle+temp.seriesName+temp.spacespan+temp.valueData+'<br />'
})
return str
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '邮件营销',
type: 'line',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
echarts多条折线图hover的时候添加单位的更多相关文章
- echarts多条折线图
折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦 var myChart = echarts.init(document.getElementById('series-ch ...
- echarts多条折线图和柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- 【前端统计图】echarts多条折线图和横柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- js 在echarts多条折线图数字*100 诡异出现小数
formatter:function(params){ //数据单位格式化 ].name; //x轴名称 , l = params.length; i < l; i++) { if(params ...
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- echarts简单的折线图
加jar包 <script src="<%=path %>/js/echarts.min.js"></script> 首先 在jsp页面中 选好 ...
- echarts 拼图和折线图的封装 及常规处理
1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...
- 【前端统计图】echarts实现单条折线图
五分钟上手: 图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
随机推荐
- 从java到JavaScript(1)，看Dart：对比Java/Go/Swift/Rust
关于 JIT与AOT,之前整理过<JIT-动态编译与AOT-静态编译:java/ java/ JavaScript/Dart乱谈>,一文不足以概括dart. 从编程语言生态看Dart 大多 ...
- vue2升级vue3:provide与inject 使用注意事项
provide / inject 类似于消息的订阅和发布.provide 提供或发送数据, inject 接收数据. VUE provide 和 inject 使用场景 当我们需要从父组件向子组件传递 ...
- 愉快的了解Charles
charles是PC端常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.除了在做移动开发中调式端口外,charles也可以用于分析第三方应用的通 ...
- 白话 Pulsar Bookkeeper 的存储模型
最近我们的 Pulsar 存储有很长一段时间数据一直得不到回收,但消息确实已经是 ACK 了,理论上应该是会被回收的,随着时间流逝不但没回收还一直再涨,最后在没找到原因的情况下就只有一直不停的扩容. ...
- VL02N、VL09交货单相关增强
一.业务需求 当前台操作过账发货或冲销时,需要将数据实时同步到第三方系统,因此需要开发增强 在用户出口MV50AFZ1->userexit_save_document中加入接口逻辑即可 定期更文 ...
- vue tabBar导航栏设计实现1-初步设计
系列导航 一.vue tabBar导航栏设计实现1-初步设计 二.vue tabBar导航栏设计实现2-抽取tab-bar 三.vue tabBar导航栏设计实现3-进一步抽取tab-item 四.v ...
- 高级数据结构---B树和B+树及mysql索引分析
mysql索引数据结构:https://www.cnblogs.com/nijunyang/p/11406688.html 几种树结构的对比: 二叉查找树:二叉搜索树,二叉排序树,优点查找快,但是在某 ...
- CommonJS 和 ES6 Module 究竟有什么区别？
https://juejin.im/post/5e5f10176fb9a07cd443c1e2
- [TSG@Site开发日志3]从C#到Qt，再从Qt到C# 和 Qt的组合开发，浅谈在采集端工控设备开发中不同技术之间选型的利与弊
[TSG开发日志3]从C#到Qt,再从Qt到C#,浅谈不同技术之间选型的利与弊 当前在South公司的开发历经了几个时代,第一个时代是用C#进行的开发,第二个时代是从C#向Qt逐渐转型,第三个时代是我 ...
- python 设计模式 开篇 第1篇
1. 设计模式的定义 软件设计中普遍存在的 反复出现的 各种问题 所提出的解决方案 首先,什么是软件设计? 系统开发 项目开始的时候 需要做 需求分析 软件系统设计 软件建模 类的设计 接口的设计 等 ...