<!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的时候添加单位的更多相关文章

  1. echarts多条折线图

    折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦 var myChart = echarts.init(document.getElementById('series-ch ...

  2. echarts多条折线图和柱状图实现

    参考链接:echarts官网:http://echarts.baidu.com/原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...

  3. 【前端统计图】echarts多条折线图和横柱状图实现

    参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...

  4. js 在echarts多条折线图数字*100 诡异出现小数

    formatter:function(params){ //数据单位格式化 ].name; //x轴名称 , l = params.length; i < l; i++) { if(params ...

  5. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  6. 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)

    一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...

  7. echarts简单的折线图

    加jar包 <script src="<%=path %>/js/echarts.min.js"></script> 首先 在jsp页面中 选好 ...

  8. echarts 拼图和折线图的封装 及常规处理

    1.html <div id="wrap"></div> 2.js ; (function ($) { $.fn.extend({ echartsPie: ...

  9. 【前端统计图】echarts实现单条折线图

    五分钟上手: 图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. 在微信小程序中使用 echarts 图片-例 折线图

    首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...

随机推荐

  1. 云图说|每个成功的业务系统都离不开APIG的保驾护航

    摘要:华为云API网关(APIG)是为企业开发者及合作伙伴提供的高性能.高可用.高安全的API托管服务, 帮助企业轻松构建.管理和部署不同规模的API. 本文分享自华为云社区<[云图说]第243 ...

  2. web自动化测试(1):再谈UI发展史与UI、功能自动化测试

    前言(废话) 行文前,安利下文章:<图形界面操作系统发展史--计算机界面发展历史回顾>.<再谈MV*(MVVM MVP MVC)模式的设计原理-封装与解耦> 1973年4月,X ...

  3. 十大 CI/CD 安全风险(一)

    CI/CD 环境.流程和系统是现代软件组织的核心.他们将代码从开发工程师的工作站传递到生产环境.结合 DevOps 和微服务架构的兴起,CI/CD 系统和流程重塑了工程生态系统: 技术堆栈更加多样化, ...

  4. 火山引擎DataTester:小改动带来大收益,A/B实验助力幸福里APP精准优化

      幸福里APP是抖音集团旗下开发运营的集内容.社区.工具于一体的房产信息综合平台,基于个性化推荐引擎向用户推荐优质的房产内容房源信息.本文将介绍幸福里APP应用火山引擎A/B测试DataTester ...

  5. coredump文件生成,以及GDB工具使用

    一.core dump文件生成 Core文件其实就是内存的映像,当程序崩溃时,存储内存的相应信息,主用用于对程序进行调试.当程序崩溃时便会产生core文件,其实准确的应该说是core dump 文件, ...

  6. 概率图模型 · 蒙特卡洛采样 · MCMC | 非常好的教学视频

    https://www.bilibili.com/video/BV17D4y1o7J2?p=1 非常感谢!感觉学会一点了,应该能写作业了

  7. spring注入的几种方式

    本文为博主原创,未经允许不得转载: Spring注入有以下几种方式: 构造方法注入:通过构造方法实现依赖注入.在类的构造方法中使用@Autowired注解注入需要的依赖类. Setter方法注入:通过 ...

  8. zookeeper 集群环境搭建及集群选举及数据同步机制

    本文为博主原创,未经允许不得转载: 目录: 1. 分别创建3个data目录用于存储各节点数据 2. 编写myid文件 3. 编写配置文件     4.分别启动 5.分别查看状态 6. 检查集群复制情况 ...

  9. Android之AMS原理分析

    在学习android框架原理过程中,ams的原理非常重要,无论是在面试中还是在自己开发类库过程中都会接触到. 1 简述 ActivityManagerService是Android最核心的服务,负责管 ...

  10. 百度网盘(百度云)SVIP超级会员共享账号每日更新(2023.12.1)

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...