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