echarts Y轴的刻度 跟数据对应---tooltip-formatter
var xAxisData = ['2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10','2018-11','2018-12'];
var legendData= ['投诉量','解决量','投诉解决率'];
var title = "多横向折线图";
var serieData = [];
var metaDate = [
[, , , , , , , ,, , , ],
[, , , , , , , ,, , , ],
[,, , , , , , , , , ,,]
]
for(var v=; v < legendData.length ; v++){
var serie = {
name:legendData[v],
type: 'line',
symbol:"circle",
symbolSize:,
data: metaDate[v]
};
serieData.push(serie)
}
var colors = ["#036BC8","#4A95FF","#5EBEFC","#2EF7F3","#FFFFFF"];
var option = {
backgroundColor: '#0f375f',
title : {text: title,textAlign:'left',textStyle:{color:"#fff",fontSize:"",fontWeight:"normal"}},
legend: {
show:true,left:"right",data:legendData,y:"5%",
itemWidth:,itemHeight:,textStyle:{color:"#fff",fontSize:},
},
color:colors,
grid: {left: '2%',top:"12%",bottom: "5%",right:"5%",containLabel: true},
tooltip : { trigger: 'axis',axisPointer : { type : 'shadow'}},
xAxis: [
{
type: 'category',
axisLine: { show: true,lineStyle:{ color:'#6173A3' }},
axisLabel:{interval:,textStyle:{color:'#9ea7c4',fontSize:} },
axisTick : {show: false},
data:xAxisData,
},
],
yAxis: [
{
axisTick : {show: false},
splitLine: {show:false},
axisLabel:{textStyle:{color:'#9ea7c4',fontSize:} },
axisLine: { show: true,lineStyle:{ color:'#6173A3'}},
},
],
series:serieData
};
tooltip: {
trigger: 'axis',
textStyle:{
fontSize:'12px',
aligin:'center',
},
formatter:function(params){ //数据单位格式化
var relVal = params[0].name; //x轴名称
for (var i = 0, l = params.length; i < l; i++) {
if(params[i].value){ relVal += '<br/> ' + params[i].seriesName + ' : ' + params[i].value*100+"%";
}
} return relVal;
}
},
echarts Y轴的刻度 跟数据对应---tooltip-formatter的更多相关文章
- echarts Y轴名称显示不全(转载)
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- Echarts实现隐藏x轴,y轴,刻度线,网格
"yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "boundaryGap" ...
- R par yaxp xaxp 显示x轴和y轴的刻度线
R语言会自动根据数据的范围,在X轴和Y轴上标记合适的刻度 > options(scipen = ) > plot(sample(:, )) 生成的图片如下 通过par("yaxp ...
- Winform中设置ZedGraph的X轴与Y轴的刻度不在对面显示
场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...
- echarts y轴,显示数据,但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...
- echarts Y轴刻度保留几位小数
yAxis: [ { type: 'value', name: '雨量(mm)', nameLocation: 'start', inverse: true, axisLabel: { ...
- echarts Y轴数据类型不同怎么让折线图显示差距不大
如果希望在同一grid中展示不同数据类型的折线(1000或10%),那么展现出来的折线肯定显示差距很大,那么怎么让这两条折线显示效果差不多,在之前的项目中碰到了这个问题 每条折线对应的是不同的数据组, ...
- Echarts Y轴min显示奇葩问题(做此记录)
项目需求是根据不同情况显示最大值最小值 有9-35 12-50 9-50 三种情况 前面两种可以显示出来 但是9-50的话 最小值9显示不出来 8,7等就可以显示出来 后面想到强制从最小值 ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
随机推荐
- mysql5.6基于主从复制的mmm高可用架构详解
MMM规划192.168.3.12 master192.168.3.13 slave1192.168.3.198 slave2 MMM部署步骤1.配置主主复制及主从同步集群2.安装主从节点所需要的支持 ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- appium+java报错之nodejs报错
$ gulp(node:784) fs: re-evaluating native module sources is not supported. If you areusing the grace ...
- js——prototype、__proto__、constructor
Object 1. Object是一个函数(typeof O ...
- 锤子科技"临死前"被"接盘" ,内部人士爆料已改签今日头条母公司
就在昨天,据据锤子科技内部人士透露,部分锤子科技员工在昨天已经接到了相关的临时通知,要求改签劳动合同至今日头条的母公司——字节跳动.至于这是锤子科技真正再度复活还是借尸还魂都不重要,重要的是,作为忠实 ...
- Jenkins五 配置tomcat
一:jdk安装 查看系统自带jdk版本并卸载 [root@localhost conf]# rpm -qa|grep jdkjdk1.8-1.8.0_201-fcs.x86_64 移除: yum re ...
- Es6模块语法笔记
/** * Created by Administrator on 2017/4/15. */ /*---------------------export命令--------------------- ...
- Gitbush笔记
1.如果要想模拟浏览器发送get请求,就要使用Request对象,通过Request对象添加HTTP头,就可以伪装成浏览器. from urllib impor request req=request ...
- CF1019C
好玄学的东西... 核心思想:for循环! 首先,我们从前向后扫所有的点,如果这个点没被标记成不可用就把这个点标记成已使用,然后把所有与这个点直接相连的点标记成不可用 接下来,我们从后向前扫所有的点, ...
- 安装mysql后在/var/log/mysqld.log 中找不到临时密码
centos7通过yum装完mysql,使用grep 'temporary password' /var/log/mysqld.log找不到root密码打开mysqld.log中根本没有tempora ...