Echarts常用属性---附智能看板素材
title/tooltip/legend/toolbox/grid /x/yAxis/series/color
当然实际作图中这些是不够滴，只是罗列出了最常用八大项，素材在最下面
title 标题组件
text、show
title: {
text: '名称',
show:false/true 是否显示，也可以直接删掉text
}
tooltip 提示框组件
trigger 触发方法（非轴图形）/position 提示组件显示的位置
tooltip: {
trigger: 'item' 鼠标经过点位才显示，切只显示经过的点位
trigger: 'axis' 鼠标经过，显示鼠标距离X坐标轴最近的一轴数据
position:[50,50]; 如果要用百分比，需要加引号 ["50%","50%"]
}
legend 图例组件 定义组件显示的方法
legend: {
left: 'center', 首先是显示的位置，可跟 数字，百分比，方位名词
data:[数据] ， 显示的每条数据的名称，要和组件里的数据名一致
testStyle:{
color/fontWeight/fontSize/fontFamily //对图例的样式配置
}
},
toolbox 工具栏
saveAsImage 下载图片 dataView 展开图片详情 这两个有印象就行
toolbox: {
show: true, 是否显示，默认显示
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
}
grid 直角坐标系
grid: {
left: '3%', // left，right‘top，bottom规定四周距离父元素的距离
right: '4%',
bottom: '3%',
containLabel: true, // 是否显示完整的数值，为false可超出父元素
show:true, // 控制四周的边框是否显示
borderColor: 'rgba(0, 240, 255, 0.3)' // 边框的颜色
}
xAxis/yAxis
xAxis: { // 这里以x刻度轴为例
show: true/false, 是否显示坐标轴
type: "类型"，
data:[], 设置坐标轴的数据
axisLabel:{ // 设置刻度轴数值的颜色
color:"green"
},
axisLine:{ // 设置x轴的样式
lineStyle:{ // 最常用的是颜色
color:"red"
}
} ，
axisTick:{ // 设置刻度线的属性
show:true，是否显示坐标轴的的刻度线
alignWithLabel: true, // 这个只对柱状图有效，控制刻度线在数据中间还是两边
}
}
yAxis:{
splitLine: { // y轴只说一个常用的，每条刻度线的颜色（分割线）
lineStyle: {
color: '#012f4a' // 分割线颜色
}
}
}
series 系列列表，通过type决定图表的类型，这里以南丁格尔为例
series：[{
name: 'XX, // 鼠标经过显示的名称
type: 'pie', // 饼形图 pie，如果是 柱状图 type: 'bar' 这个一般复制的时候会自带
radius: ["10%", "70%"], // 这里是两个同心圆做成的图，分别为大小圆的半径，
center: ['55%', '50%'], // 显示的位置
roseType: 'radius',
radius扇区圆心角展现数据的百分比，半径展现数据的大小
'area' 所有扇区圆心角相同，仅通过半径展现数据大小
删掉这个属性则以半径相同，角度大小不同来展示数据
itemStyle: { // 每块区域的属性
borderRadius: 5， 设置圆弧
color: '颜色'
...
},
labelLine: { // 设置
length: 2,
length2: 2
}
}]
color 颜色，这里只说一下常用的柱状图渐变色
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
// 范围从 0 - 1，相当于在图形包围盒中的百分比
0, 0, 0, 1,
[{
offset: 0, // 0% 处的颜色
color: '#00fffb'
}, // 0 起始颜色
{
offset: 1, // 100% 处的颜色
color: '#0061ce'
} // 1 结束颜色
]
)
素材领取地址
// 你可能会用到的代码切图小知识
1、使用场景：相同的背景/边框，但是大小不相同，不能使用背景图片，只能使用边框图片(代码切图)。
2、切4刀，上（水平），又（垂直），下（水平），左（垂直）；留下的是4条线外边的四个角，去除的是相交的4条边。
3、属性
1-border-images-source 图片路径
2-border-image-slice 图片边框内偏移量，不加单位，上右下左的顺序（距离上下左右边框的距离，用px计算）
3-border-image-width 图片边框的宽度，需要加单位（不是边框的宽度，是边框里面背景图的宽度）
4-border-image-repeat 图片边框是否（平铺 repeat）（铺满round）（拉伸strentch）默认拉伸
4、一定要有border属性，如果不给border-image-width属性，那么默认的边框宽度就是border的宽度，border-image-repeat的值一般是round
链接: https://pan.baidu.com/s/1AdMlUKLHGtPkFbgf1NVztQ
提取码: 1996
Echarts常用属性---附智能看板素材相关推荐
- echarts常用属性X轴属性大全，下载按钮，横轴显示不全等
`1.x轴属性大全 xAxis: { show: true, // 是否显示 x 轴 position: 'top', // x 轴的位置('top','bottom') type: 'categor ...
- 数据可视化Echarts—— 案例：立可得-智能看板
案例:立可得-智能看板 项目介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引入 '立 ...
- numpy的基本使用 附python代码详细讲解（numpy函数，创建数组，常用属性，索引切片，数组的复制，修改维度，数组的分割、拼接、转置）
目录 使用array创建数组 使用arange创建数组 Numpy中的随机数创建 ndarray对象的常用属性 其他方式创建数组 索引和切片(一位数组.二维数组) 数组的复制 修改数组的维度 数组的拼 ...
- TeeChart for .NET常用属性总结
2019独角兽企业重金招聘Python工程师标准>>> 本文总结了图表控件Teechart for .NET常用的一些属性,对图表开发人员来说是一个很好的参考. 实现绘图步骤: 1. ...
- html5中音频、视频标签、自定义播放器常用属性及方法、全屏操作、新增属性兼容问题
多媒体标签: 音频标签audio: <audio src="音频文件的URL"></audio><!-- audio标签需要controls控件才可以 ...
- display:column常用属性解释
1.官方网址: http://www.displaytag.org/1.2/displaytag/tagreference.html 2.<display:column>介绍: 顾名思义, ...
- C#控件及常用属性整理
C#控件一览表 前所未有的震撼(太详细了) 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来 ...
- 模糊数学 计算机智能,《常用算法之智能计算 (五) 》：模糊计算
原标题:<常用算法之智能计算 (五) >:模糊计算 人们常用"模糊计算"(FuzzyComputing)笼统地代表诸如模糊系统.模糊语言.模糊推理.模糊逻辑.模糊控制. ...
- Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表 柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果 最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
最新文章
- 学习决心书-linux oldboy
- python中findroot_python文件查找之find命令
- C语言程序设计双语版,双语版C程序设计(英汉对照)
- SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
- tmux多窗口工具基本操作
- php工程模式,factory - PHP工程模式如何传入参数
- 关于多线程编程您不知道的 5 件事 有关高性能线程处理的微妙之处
- 如何修改php的网页文件,php如何修改php文件内容
- CoreMotion(加速计)
- Keras过拟合相关解决办法
- Servlet(二)GenericServlet
- 下载离线aptana的eclipse插件
- react 实现图片正在加载中 加载完成 加载失败三个阶段的
- 在手机上模拟kali系统（bochs）
- Twaver-HTML5基础学习(12)连线(Link)
- 如何锻炼腹肌更加有效？
- 足球大师服务器维护,球员能力提升终极密法《足球大师》详细突破攻略
- eclipse配置python开发环境_如何在Eclipse中配置python开发环境
- python提取excel内容
- shell脚本（linux）