在开发 echarts 的过程中，虽然该插件以及高度封装了大量的 开箱即用的 示例，但是还是有很多的 配置选项提供给我们开发者或者用户去更改默认图表的样式。
这里针对个人开发中用到的配置或者常见的配置项进行记录。
官方常见图表示例:
Handbook - Apache ECharts
官方图表配置项查看:
Documentation - Apache ECharts
1.图表的 x,y轴 隐藏或者消失不需要
在 yAxis 和 xAxis 中 设置 show:false
example:
yAxis: {
type: 'value',
show:false
}
x,y轴隐藏.PNG
2.图表内容占据整个html 元素
一般的情况下 在官网的示例中(如下图)也是没有占满
在 options 中加入以下设置
option = {
grid:{
left:0,
top:0,
right:0,
bottom:0
}
}
占据整个之前.PNG
占据整个之后.PNG
3. 折线图上的每个 折点(转折点或顶点)去除
只需加入以下 symbol 配置项
series: [{
symbol: "none",
}]
折线图无点.PNG
4. 光滑的 折线图
一些客户需求想要平滑一点的 折线图？这是什么操作？
其实就是折线图的每个连线过于硬直，想要一点过渡，曲线的美感？
在 series 中加入 smooth 即可， 配合 symbol 可以得到很好看的一条曲线
series: [{
symbol: "none",
smooth: true
}]
平滑图.PNG
5. 折线图除了一条线，下边很难看？
加个面积效果(有点定积分的味道),加个 areaStyle
series: [{
areaStyle: {}
}]
空对象表示 面积的样式为默认
设置面积的样式,example:
areaStyle: {
color: '#ff0',
opacity: 0.5
}
面积图.PNG
6. 折线图 线段颜色设置
有时候想要更改折线图的 线段颜色。有五条线段就对应 数组里边几个数值
只需要在 option 里加入 color 数组即可
option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00']
}
好看的颜色线段.PNG
------------------2022.8.15-----------------
今天分享下 饼图的一些个性化的设置
7. 饼图的数据段的设置
7.1想让每个数据段之间有间隙
series: [
itemStyle: {
borderColor: 'black',
borderWidth: 6
}
]
间隙设置.PNG
7.2 额外的如果想带让每段数据的边角是圆边
加上它即可
itemStyle: {
borderRadius: 10
}
圆边.PNG
7.3调节饼图的大小而不是整个 图表的大小
通过调节 radius即可
series:[
radius: 50%
]
7.4 饼图 实现 空心饼(饿了)
给 radius 传入 数组即可
radius: ['50%', '80%'],
8.设置图表的 legend 纵向排列，并且位于左或右
options={
legend:{
orient: 'vertical',//纵向
x: 'right' //位置
}
}
8.1 有时候想自定义 legend 的文字
加入以下代码, return 一定要写, v 就是每个 data里边的名称值
legend:{
formatter:function(v){
return v+'1' //演示以下
}
}
legend 的文字.PNG
