echarts 折线图百分比 tooltip 实例 两种方法

方法一

在知道有几个类型时:下面有五个类型

tooltip : {
show : true,
trigger: ‘axis‘,
formatter: ‘{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%‘
},

如图:

方法二

在不知道几个类型时: 自定义类型

client.get("/charList", data, function(result){
if (result) {
for ( var i = 0; i < result.resultValue.items.length; i++) {
for ( var j = 0; j < result.resultValue.items[i].series.length; j++) {
applyProTempo={
name: result.resultValue.items[i].series[j].name,
type: result.resultValue.items[i].series[j].type,
data: result.resultValue.items[i].series[j].data,
connectNulls: true
}
seriesData.push(applyProTempo);
}
}
_mychart.setOption({
tooltip: {
show: true,
trigger: ‘axis‘,
formatter: function (seriesData, ticket, callback) {
var showHtm="";
for(var i=0;i<seriesData.length;i++){
//名称
var name = seriesData[i].seriesName;
//x轴名称
var text = seriesData[i].name;
//值
var value = seriesData[i].value;
if(i==0){
showHtm = text+ ‘<br>‘;
}
showHtm+= name + ‘: ‘ + value+‘%‘+‘<br>‘
}
return showHtm;
}
},
legend: {
orient: ‘horizontal‘,
top:‘0%‘,
center:‘center‘,
data: result.resultValue.items[0].legend
},
grid: {
left: ‘4%‘,
right: ‘3%‘,
bottom: ‘3%‘,// 这几个属性可以控制图表上下左右的空白尺寸,可以自己试试。
containLabel: true
},
axisLabel: {  
                               interval: 0,  
                               formatter:function(value)  
                               {  
                                   return value.replace(/^0*/,"");
                               }  
                           },  
xAxis: {
boundaryGap : true,
show : true,
axisLabel:{
interval:0
},
type: ‘category‘,
name: ‘日期‘,
splitLine: {
show: false
},
data: result.resultValue.items[0].category
},
yAxis: {
name:‘登录率‘,
type: ‘value‘,
interval: ‘auto‘,
axisLabel: {
formatter: ‘{value}%‘
}
},
series: seriesData
});
}else{
mx.indicate("info","图表请求数据失败!");
}
});

如图:

原文地址:https://www.cnblogs.com/zxy-come-on/p/10821266.html

时间: 2024-10-06 18:22:21

echarts 折线图百分比 tooltip 实例 两种方法的相关文章

MySQL单实例重置密码的两种方法

MySQL单实例重置密码的两种方法 在工作学习中,我们有时会忘记数据库的密码,下面是MySQL单实例密码重置的步骤. 说明: (1)[[email protected] ~]# cat /etc/redhat-release CentOS release 6.7 (Final) (2)[[email protected] ~]# mysql --version mysql  Ver 14.14 Distrib 5.7.13, for Linux (i686) using  EditLine wr

python list排序的两种方法及实例讲解

对List进行排序,Python提供了两个方法 方法1.用List的内建函数list.sort进行排序 list.sort(func=None, key=None, reverse=False) Python实例: >>> list = [2,5,8,9,3] >>> list [2,5,8,9,3] >>> list.sort() >>> list [2, 3, 5, 8, 9] 方法2.用序列类型函数sorted(list)进行排

实现Echarts折线图的虚实转换

需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础上进行的优化.主要的解决思路是:实线和虚线重叠,需要用虚线显示的部分,实线的data设置为 '-'. 1 { 2 name: '温度(°C)', 3 type: 'line', 4 stack: '温度1', 5 itemStyle: { 6 normal: { 7 lineStyle: { //系

echarts折线图动态改变数据时的一个bug

echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http://gallery.echartsjs.com/editor.html?c=xS1T_X893l&v=2

【开发实例】C#调用SAPI实现语音合成的两种方法

我们都知道现在的语音合成TTS是可以通过微软的SAPI实现的,好处我就不多说了,方便而已,因为在微软的操作系统里面就自带了这个玩意,主要的方式有两种:  1.使用COM组件技术,不管是C++,C#,Delphi都能玩的转,开发出来的东西在XP和WIN7都能跑.(要引入SpeechLib,好像在项目上点引用,然后选到系统COM吧,好久没弄,记不清楚了)  2.使用WIN7的windows api,其实最终还是调用了SAPI,所以开发出来的东西就只能在WIN7上面跑.  其实不管是哪一种,都是调用S

有向无环图(DAG)拓扑排序的两种方法

如下图的DAG: 第一种: (1)从AOV网中选择一个没有前驱的顶点并且输出它: (2)从AOV网中删除该顶点,并且上去所有该顶点为尾的弧: (3)重复上述两步,直到全部顶点都被输出,或者AOV网中不存在没有前驱的顶点. 第二种: 使用深度优先搜索(DFS),并标记每一个节点的第一次访问(pre)和最后一次访问时间(post),最后post的逆序就是DAG的拓扑排序,其实也是节点在进行DFS搜索时,出栈的逆序就是拓扑排序. 拓扑序列的结果有: (1) c++,高等数学,离散数学,数据结构,概率论

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:  再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首 先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/skin/

android 中传递对象两种方法探索(Serializable,Parcelable)

相信大家在android开发的过程中总会遇到要在Activity中间传递数据的情况,当然,遇到需要在Intent中传递对象的情况也不可避免,所以我就so了一下相关的知识,在这里总结消化一下.就目前来说,我了解到的只有两种方式: 1.利用Bundle.putSerializable(Key,Object): 2.利用Bundle.putParcelable(Key, Object): 下面详细介绍两种方法的使用和区别: 首先第一点,这两种方法实现的前提都需要将传递的对象Object序列化,那么,问

Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法

上学时C#老师讲到对象有两类方法,静态方法(Static)和实例方法(非Static),当时不理解静态是为何意,只是强记. 后来从事了前端的工作,一直在对类(即对象,Js中严格来说没有类的定义,虽众所周知,这里还是赘述一番,以免产生歧义)的操作上,严重缺乏整体概念,最近看extetnd中再次提到拓展静态方法与实例方法,故而再次百度,才幡然领悟,其实一直有用,只是不知其专业术语呀,哈哈~ 静态方法,属于类的方法,即类可以直接调用的方法.为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态