echarts 图表常见配置选项

在开发 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