echart3图表的一些基本配置
最近有机会做了一个小的数据展示页面,用到了echart3的曲线图,整个开发使用过程倒还顺利。
就是在最后配置图表的折腾了蛮久,真心觉得echart的配置文档不够好。。。
下面就以line-stack为例来说说一些配置项的修改!
线条的颜色
全局修改,简单粗暴
itemStyle: {
normal: {
color: '#000'
}
}
逐条修改,各自为营
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
lineStyle: {normal: {color: 'yellow'}}
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310],
lineStyle: {normal: {color: 'red'}}
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410],
lineStyle: {normal: {color: 'blue'}}
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320],
lineStyle: {normal: {color: 'black'}}
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {normal: {color: 'orange'}}
}
]
x轴坐标边框的颜色
xAxis : [
{
axisLine: {
lineStyle: {color: 'blue'}
}
}
]
x轴坐标文字的样式
xAxis : [
{
axisLabel : {
show : true,
textStyle : {
color : '#f0f',
align : 'left',
fontSize: 16
}
}
}
]
y轴坐标边框的颜色
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {color: 'green'}
},
}
]
y轴坐标文字的风格
yAxis : [
{
type : 'value',
axisLabel : {
show : true,
textStyle : {
color : '#0ff',
align : 'right',
fontSize: 16
}
}
}
]
去掉x/y轴网格线
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
//看这里
splitLine:{
show:false
}
}
],
yAxis : [
{
type : 'value',
//看这里
splitLine:{
show:false
}
}
]
隐藏图例说明legend
legend: {
//看这里
show: false,
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
}
隐藏保存为图片图标saveAsImage
toolbox: {
feature: {
saveAsImage: {
show: false
}
}
}
还有几个effectScatter-map图的配置
地图上tooltip的显示格式
tooltip : {
trigger: 'item',
//回调函数更加灵活
formatter: function (params) {
return params.seriesName + params.value[3] + " " + params.name + ':' + params.value[4];
}
//字符窜格式化方便点,不是很灵活。。。
//formatter: '{a} {b}:{c}'
},
鼠标移动到地图标点上的颜色
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
},
emphasis: {color: 'red'}
}
先记录这么多,以后遇到了再追加。。。
yangbai
如果非要用一种东西来记录我得生命历程,我会用朋友!
推荐阅读
利用Charles做代理测试电脑上写的H5页面
做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢? 下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现! 安装Charles 直接去官网下载对应的系统版本安装即可。...
杨佰赞 2阅读 5.8k
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...
寒青赞 56阅读 8.4k评论 11
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...
jenemy赞 48阅读 6.9k评论 12
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 75阅读 7k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 42阅读 6.8k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 45阅读 8.5k评论 6
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...
乌柏木赞 35阅读 6.6k评论 10
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。