echarts折线图实线与虚线拼接,及提示框浮层内容格式的设置
来源:互联网 发布:劫单挑亚索 知乎 编辑:程序博客网 时间:2024/05/29 12:49
话不多说上代码
option = {
title: {text: '对数轴示例',
left: 'center'
},
tooltip: {
trigger: 'axis',
formatter:function (params) {
var str="";
var n = []; //一个新的临时数组
var m=[];
for(var i=0;i<params.length;i++){
if(params[i].data==""||undefined==params[i].data){
}else{
n.push(params[i].marker+params[i].seriesName+":"+params[i].data+"<br>");
}
};
for(var i = 0; i < n.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if (m.indexOf(n[i]) == -1) m.push(n[i]);
}
for(var i = 0; i < m.length; i++){
str+=m[i];
}
//console.info(params);
return str;
}
},
legend: {
left: 'left',
data: [ '2的指数','3的指数']
},
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: '3的指数',
type: 'line',
data: [1, 3, 9, 27, 81, 247, , ,]
},
{
name: '3的指数',
type: 'line',
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data: [, , , , , 247, 741, 2223, 6669]
},
{
name: '2的指数',
type: 'line',
data: [3,5 ,7 ,35 , 3, 247, 74, 2223, 33]
},
]
};
当params[i].marker为空时可这样写
var colortype = '<spanstyle="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[i].color+';"></span>'
n.push(colortype+params[i].seriesName+":"+params[i].data+"<br>");
下面上图:
阅读全文
0 0
- echarts折线图实线与虚线拼接,及提示框浮层内容格式的设置
- echarts折线图实线加虚线
- echarts 实线改变成虚线
- css设置表格的边框为实线还是虚线,+鼠标悬停显示提示字
- ECharts折线图tooltip提示框格式自定义
- echarts折线图柱状图的坐标轴的颜色及样式的设置
- [Java语言] 实线与虚线
- echarts 折线图/柱状图 tooltip格式定制
- uml图中实线箭头和虚线箭头的区别
- uml图中实线箭头和虚线箭头的区别
- 仿echarts的折线图
- Echarts折线图的实例
- echarts设置折线拐点中心的颜色
- Echarts柱状图与折线图的基本使用
- echarts折线图不堆叠设置
- 使用echarts动态设置多重折线图
- Unity中画实线与虚线
- Visio虚线变实线的解决方法
- 【算法】程序猿不写代码是不对的73
- vue2 子组件调用父组件中data中的值
- iOS动态关联对象
- 算数移位(<<, >>)与逻辑移位
- 一篇写的很赞的HTTPS的文章
- echarts折线图实线与虚线拼接,及提示框浮层内容格式的设置
- Linux-execve时的文件加载流程
- jQuery 页面加载完成调用函数
- net use命令详解
- filter过滤器(java、servlet)
- Android 线程池
- WebStorm 2017.1.4激活码
- Java性能优化
- CC2538 zigbee I2C示例代码读写AT24C02D eeprom