Echarts3.0使用心得
来源:互联网 发布:云计算行业分析 编辑:程序博客网 时间:2024/06/05 11:44
在数据可视化展示时,会使用到Echarts进行画图,下面分享Echarts的几个具体细节:
- 饼图和柱形图加具体数据显示
- 柱形图横坐标为图片和文字
- 坐标轴线以及坐标轴设置
- tooltip的个性化设置
- 横坐标过长换行
- 曲线光滑无圆点以及图例设置
饼图和柱形图加具体数据显示
示例
具体做法
- 饼图的具体做法
在series属性里面添加:
label: {
normal: {
formatter: function(params) {
var relVal = ”;
relVal+=params.name + ’ : ’ + params.percent.toFixed(1)+”%”;
return relVal;
},
label : {
show : true,
},
},
}柱形图的具体做法
在series属性里面添加:
label:{
normal:{
show: true,
position: ‘right’,
formatter:’{c}%’,
}
}
柱形图横坐标为图片和文字
示例
具体做法
- 饼图的具体做法
在series属性里面添加:
markPoint:{
data:[{
symbol:”image://” + img1,
symbolSize:[32,40],
x:’19%’,
y:260
},…,
]
}
Attention x和y需要根据实际情况设置
坐标轴线以及坐标轴设置
已y轴为例,在yAxis属性里面添加:
axisTick: {
“show”: false
},
splitLine: {
“show”: true,
“lineStyle”: {
“color”: “#E9E9E9”
}
},
axisLine: {
“lineStyle”: {
“color”: “#E9E9E9”
}
}
ToolTip个性化设置
在tooltip对象里面添加(主要添加图例以及颜色):
formatter: function(params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += “<’span’ style=’display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:”+params[i].color+”’><’span’/>”+params[i].seriesName + ’ : ’ + params[i].value.toFixed(1)+”%”;
}
return relVal;
}
横坐标过长换行
在xAxis-axisLabel对象里面添加:
interval: 0,//标签设置为全部显示
formatter:function(params){
//2个字换行
var newParamsName = “”;// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 2;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/* 循环每一行,p表示行 /
for (var p = 0; p < rowNumber; p++) {
var tempStr = “”;// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + “\n”;
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
曲线和图例设置
在series对象里面添加:symbol:’none’,smooth:true
在legend对象里面添加:name(图例名称),icon(图例形状,如:圆圈,方框等),textStyle(样式)
- Echarts3.0使用心得
- 浅谈ECharts3 柱形图使用心得
- 使用Echarts3.0做图表
- Ionic2中使用ECharts3
- Echarts3 使用详解
- ECharts3使用入门
- Echarts3.0的简单使用,动态获取数据
- 浅谈Echarts3.0
- 定制echarts3.0饼图
- echart2.0 Vs echarts3.0
- ECharts3.0 强大的统计图
- vue中echarts3.0自适应
- 使用webpack 使用Echarts3简单入门
- Echarts3.0使用中遇到的问题总结——tooltip提示框大小样式问题
- 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)
- openlayers与echarts3的结合使用
- Echarts3.0+Ajax请求数据柱状图实例
- 可视化篇:Echarts3.0引入百度地图
- PC的默认串口
- Pytorch入门
- HDU 3374 String Problem(最大最小表示法模板+KMP+next数组的运用)
- RecyclerView Item 布局宽高无效问题探究
- redis和memcached的区别(总结)
- Echarts3.0使用心得
- JavaScript DOM BOM
- Maven项目在Maven启动的时候出现:Address already in use: JVM_Bind<null>:8080
- Luogu-3834 (主席树模板)
- 欢迎使用CSDN-markdown编辑器
- linux 通过包安装jdk
- 索引失效的情况
- char、varchar、varchar2区别
- A+B+C问题