echarts不同类型图的特殊配置汇总

一、echarts特殊配置连载之 饼图

1. 饼图单项不同颜色的设置

效果图：

实现：

说明：

其实很简单，就是设置全局的color属性即可。color属性可以是一套数组，里边的样式以字符串格式设置。

设置以后饼图每一项会依照顺序使用数组的颜色值，如果不够用会循环使用。

2.饼图每个单项的渐变效果

效果图：

实现：

说明：

data数据可以是一个数组，数组每一项是一个对象，对象里边可以再次设置私有属性以覆盖全局属性，比如color。

所以对每一个单项设置渐变色，就在data数组的每一个对象中单独设置color即可。

代码：

data: [
    {
        value: 335,
        name: '直接访问',
        itemStyle: {
            color: {
                colorStops: [{
                        offset: 0,
                        color: '#ff7474 ' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#4176ff' // 100% 处的颜色
                    }]
            }
        }
    },
    {
        value: 310,
        name: '邮件营销',
        itemStyle: {
            color: {
                colorStops: [{
                        offset: 0,
                        color: '#ffe390' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#f7c222' // 100% 处的颜色
                    }]
            }
        }
    },
    {
        value: 234,
        name: '联盟广告',
        itemStyle: {
            color: {
                colorStops: [{
                        offset: 0,
                        color: '#9090ff' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#5656d0' // 100% 处的颜色
                    }]
            }
        }
    },
    {
        value: 135,
        name: '视频广告',
        itemStyle: {
            color: {
                colorStops: [{
                        offset: 0,
                        color: '#95ec95' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#4ebb4e' // 100% 处的颜色
                    }]
            }
        }
    },
    {
        value: 1548,
        name: '搜索引擎',
        itemStyle: {
            color: {
                colorStops: [{
                        offset: 0,
                        color: '#ea92ff' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#a847bf' // 100% 处的颜色
                    }]
            }
        }
    }
]

3.饼图label固定字数，超出的限制为显示”...”

效果图：

实现：

见另一篇文章总结比较清晰明了: echarts中 设置x||y轴文案、提示文字等为固定字数，超出显示"..."

4.饼图根据单项数据大小设置文案的展示状态（是否探出等）

效果图：

实现：

说明：

同颜色的道理一样，data数组里边的每一项还有很多可以设置的属性，包括label是否展示等。

所以在拿到数据以后，遍历返回的data每一项的value值，如果小于自己的需求范围，就在这一项上边设置label不展示的代码即可。

代码：

data: [{
        value: 35,
        name: '视频广告',
        labelLine: {
            normal: {
                show: false
            }
        },
        label: {
            normal: {
                show: false
            }
        }
    }, {
        value: 315,
        name: '邮件营销'
    }
]

5.饼图展示标签在外边或在里边

效果图：

实现：

说明：

默认设置全部都不探出，只在内部显示，而只要data某一项中value值符合条件就对此项单独设置为label探出效果即可。

代码：

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                show: false,
            },
            data: [{
                    value: 335,
                    name: '直接访问'
                }, {
                    value: 310,
                    name: '邮件营销'
                }, {
                    value: 234,
                    name: '联盟广告'
                }, {
                    value: 135,
                    name: '视频广告视频广告视频广告',
                    label: {
                        show: true,
                        position: 'outside'
                    },
                    labelLine: {
                        show: true,
                        smooth: true,
                        lineStyle: {
                           // color: 'red'
                        }
                    }
                }, {
                    value: 1548,
                    name: '搜索引擎搜索引擎搜索引擎搜索引擎搜索引擎',
                    label: {
                        formatter: function (params) {
                            if (params.data.name.length > 5) {
                                var labelNewText = params.data.name.substring(0, 6) + ' ...'
                            }
                            return labelNewText
                        }
                    }
                }],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
};

---

二、echarts特殊配置连载之 线图

1. 线图区域渐变

效果图：

其实这种样式在官网的demo中有类似的效果，像这个 basic area chart 的，主要是线图下边的区域设置。

起作用的是 series(type=line) 下的 areaStyle（我的字面理解是区域效果）属性的效果。

而 渐变效果 见另一个图表：tooltip and DataZoom on Mobile

在此有关于渐变的设置：

不过，在本例中我的最终实现代码为：

你会发现跟上边贴链接的渐变效果配置不一样，具体注解或者其他的区域填充样式，可以直接去配置项的这个位置查看：┏ (゜ω゜)=

areaStyle: {
    normal: {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: '#638FFF'
            },
            {
                offset: 1,
                color: 'rgba(248,65,126,0.90)'
            }],
            globalCoord: false
        }
    }
}

2. 显示加百分号，并作小数点后两位百分比处理

同之前的那一篇文一样，属于同一类问题。

其实有了 formatter 回调函数，对展示文案的处理怎么都好说，就是js代码的组合拼装了其实。

具体见另一片博文：┏ (゜ω゜)=

配置项位置： ┏ (゜ω゜)=

这个formatter函数的参数，给了我们几乎所有的好用的值：

效果：

代码：

option = {
    label: {
        show: true,
        formatter: function(params) {
            return (params.data).toFixed(2) + '%'
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901.856, 934.78567, 1290.4, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

3. Solid模式的水平线

这个对于我来说的难题就是，后台只给我一个值，然后让我连成一条线。【微笑】

有点数学常识的，错，有点生活常识的都知道最起码两点成一线吧。

而且在echats图标里，series下的多个对象，他们内部的data值数量应该对应，这样每一个x轴对应的点有数据，整条线才会充满整个x轴，否则就像下边这样：

红线的data值数量小于蓝线的，所有红线看上去就短了。

如果只给我一个数，不用看也知道是下边这样一个点：

那我怎么才能让其连成一条和上边的线同等长度的直线呢？

那我怎么才能让其连成一条和上边的线同等长度的直线呢？

以我的榆木脑袋，能想到的只有把一个点繁衍成所有需要的点，形式就像这样：

复制多个直到和上边的数组长度相等。。

没办法，这个活我不干就得后端干。

困扰我多年，如果各位看客知道ecahrts还有更好的解决办法，恳请指正。

-#-# -#- -#--#-# -#- -#--#-# -#- -#--#-# -#- -#--#-# -#- -#-

好了我的主题来了，这里四个520，其实已经是一条直线了，还要做平均线吗？

要做，echarts的平均线很好看，这个四个相同数值画出来的直线没有那个效果。

于是，配置平均线的代码我这样写：

真正的主角是 markline，他会根据你的配置，自动计算data里边所有数值和的平均值，你只需要简单地配置就能生成一条美丽的平均线，

默认平均线的线型是虚线，可以和css的border一样设置为solid（实线），以及颜色美化等都看自己的需要。

这里我特地标注了symbolSize，我设置为了0。他的作用是将上文说的四个520（本文的多个2.6）形成的直线上，每个数值与x轴对应的点的大小设置为0。

不然data里多个数值形成的直线长这样，就像糖葫芦。很明显的能看出来，多个小圆点被直线穿过。

将点的大小设为0，视觉上，线上就没有圆点了。

然后线的粗细也设置为最小，让其与平均线合二为一。就成了完美的平均线。（见下边的蓝色平均线）

其实红线也是平均线，红线上的黄色区域是我故意突出显示的线条。黄色线条就是多个相同数值连成的直线。如果没有平均线，线条的位置和长短大概就是黄线区域的样子。

代码：

option = {
    title: {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸发量', '降水量']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
        type: 'value',
        splitLine: {
            show: false
        }
    },
    {
        type: 'value',
        splitLine: {
            show: false
        }
    }],
    series: [{
        name: '蒸发量',
        type: 'line',
        symbolSize: 0,
        markLine: {
            data: [{
                type: 'average',
                name: '平均值'
            }],
            lineStyle: {
                type: 'solid'
            }
        },
        lineStyle: {
            width: 0
        },
        data: [12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6, 12.6],
        smooth: true,
    },
    {
        name: '降水量',
        type: 'line',
        symbolSize: 0,
        markLine: {
            data: [{
                type: 'average',
                name: '平均值'
            }],
            lineStyle: {
                type: 'solid',
                color: 'red'
            }
        },
        data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6],
        lineStyle: {
            width: 20
        },
        yAxisIndex: 1
    }]
};

---

三、echarts特殊配置连载之 柱图

其实包括饼图、线图在内，和柱图都一样的感觉，他们的配置项基本也是对应的那几个，所以想实现某些相似的效果，只要找到对应的属性就可以了。

1.柱图渐变色设置

还记得上篇线图中的实现是在areaStyle的里边设置normal状态下的color吗？

柱图和他异曲同工，不过柱图不是areaStyle，而是itemStyle

item有单项的意思，我的字面理解是设置每一个单柱的样式。渐变也可以。

itemStyle: {
    normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#83bff6'
        },
        {
            offset: 0.5,
            color: '#188df0'
        },
        {
            offset: 1,
            color: '#188df0'
        }])
    },
    emphasis: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#2378f7'
        },
        {
            offset: 0.5,
            color: '#83bff6'
        },
        {
            offset: 1,
            color: '#2378f7'
        }])
    }
}

还有这种彩色渐变的效果，也是一个道理。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        nameTextStyle: {
            color: 'red'
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        itemStyle: {
            normal: {
                barBorderRadius: [50, 50, 0, 0],
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(248,65,126,0.90)'
                    },
                    {
                        offset: 1,
                        color: '#638FFF'
                    }],
                    globalCoord: false
                }
            },
            emphasis: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(248,65,126,0.90)'
                    },
                    {
                        offset: 0.5,
                        color: 'rgba(113,23,103,0.40)'
                    },
                    {
                        offset: 1,
                        color: '#638FFF'
                    }],
                    globalCoord: false
                }
            }
        },
        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

2.柱图根据x轴的数量决定是否展示label文案

如上红圈，初始化定义个变量，默认展示label。如果判断x轴配置里，data的length大于（不满足）设定值的时候，变将此值设置为false，再次渲染即可。

let showLable = true;
label: { normal: { show: showLable, position: 'inside' } },

3.柱图鼠标hover时不用shadow和line模式

只是让柱图偏白色，类似官网示例，不过官网示例没有代码展示。

直接把tooltip去掉就行了。。

就是这么草率。但是这个效果我当初一直调不出来。这还是无意中发现的。得记下来。

四、Echarts - 树图实现四个层级

我相信很多人和我一样，制作echats图标时，都会先去demo官网找相同的或者近似的效果，然后再此基础上改进成我们想要的那个。

但是近期混迹某微信群时，我看到一个群友抛出问题说，echarts画树状图，自己有四层数据，但是只有三层渲染出来了。

我跟他说你去ecahrts官网找个四级的。我记得有的。

他说官网的也只有三层，还截图给我看，

我不死心的去官网找：官网传送门

果然还是被我找到了：

数据太多，勉强观看。

我甚至还能搞成五层

不卖关子。其实我也是直接在官网找的demo，只不过不是她找的那么直观的demo，只不过做了小小的修改：

纵观官网这几个demo ，如果要他的从左向右的树状图的话，都是三级的。

不过漏掉了一个，左下角这个径向图。他其实是四级的啊。

如果找到他四级的秘密或者说直接将其变成树状图，那不就大功告成！

而我的实现也确实如此：

第一种是直接将其变成树图

第二种是利用其四级的秘密，直接修改树图的层级。

首先说第一种，我将径向图改成正常的树图。因为径向图就是从树图改编而来，再将其变回原型不是什么难事，只需要一个属性的修改：

正交还是径向，一键配置，随心所欲。

打开官网径向图的demo配置，可以看到layout处的设置正是radial。我直接将其改成了default，然后就变成了上图四级树图的效果。很easy。

然后说第二种方法，不装*的说，我也是无意看到的，一个让我眼前发亮的单词：initialTreeDepth

Tree： 数、Depth： 深度。。。

难道？。。。

没错，就是层级，正儿八经的介绍如下：

哈哈，一不小心触碰机关，找到了升级的秘密。

看来平时多掌握点中国式英语也很有用啊！

---

另外我只想说，重在实践。

前端的东西，是写一下代码就能看到效果的。因此上手、接受起来相对比较迅速。这也是我喜欢他的地方吧。