echarts 常见的功能点小结

前言

echarts，可视化大数据必备品。很多人都会认为，既然有官方文档和gallery，到时候直接拿过来用就行。但真正到用的时候，很多人应该像我一样，根本不知道该设置啥属性，好不容易找到了，又可能因为版本等问题造成某个属性不生效。简直是百爪挠心。。。既然今年与echarts频频过招，那么索性总结一番。如有不对的地方，欢迎讨论~~

---

---

一、简介

什么是Echarts

商业级数据图表，使用纯JavaScript的图表库，兼容绝大部分的浏览器(包括适配移动端、小程序端)，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

常见的数据可视化库：

• D3.js 目前web端评价最高的js可视化工具库(入手难)
• Echarts.js 百度，目前归于阿帕奇
• AntV 蚂蚁金服
• Highcharts(国外的非商用免费) 相比于Echarts就像office与wps的关系

二、使用

过程略，可参考官方文档。

基础配置

主要配置：series、xAxis、yAxis、grid、tooltip、title、legend等

术语速查手册：https://echarts.apache.org/zh/cheat-sheet.html

三、实例

通用样式

---

1、坐标轴

• 修改轴线样式：

type: '', // 在该层级中
axisLine: {
    show: true,
    lineStyle: {
        color: 'pink', // 轴线颜色
    },
},

• 修改刻度样式：

axisTick: {
    show: true,
    lineStyle: {
        color: "#dddddd", // 刻度线的颜色
    },
    alignWithLabel: true, // 标签与刻度线是否对齐
},

• 修改刻度标签样式：

axisLabel: {
    show: true, 
    textStyle: {
        color: "#666666", // 坐标轴标签的颜色设置
    },
}

• 刻度标签过长，需要旋转：

axisLabel: {
    textStyle: {
        interval: 0, // 强制显示所有标签
        rotate: 40, // 旋转逆时针方向40度
    },
},

• 格式化刻度标签内容：

axisLabel: {
    formatter: function (value, index) {
        return value + "万人";
    },
},

• 坐标轴刻度文字溢出隐藏：

一般来说文字过长最好就精简刻度标签，或者让文字倾斜一些。如果是在没法避免很长，那就参考以下链接：https://blog.csdn.net/weixin_42069147/article/details/107667504
文章写的很好，此处不再做过多赘述。

• 坐标轴单位设置：

yAxis: [
    {
        type: "value",
        name: "人",
        nameLocation: "end",
        nameTextStyle: {
            padding: [0, 70, 0, 0], // padding可以调整坐标轴名称与坐标轴之间的距离
        },
        nameGap: -6 // 坐标轴名称与轴线之间的距离
    },
],

​ 我尝试过在x轴设置名称，但是设置padding值并不能影响位置。有没有遇到过类似问题的大佬啊，求告知~~

• 分隔线

type: '',
splitLine: {
    lineStyle: {
        type: "dashed", // 分割线样式
    },
},
// 设置最小值，设置后，y轴不能均分，需要用splitNumber去协助控制分隔线数量
min: function (value) {
    return parseInt(value.min) - 20; // 
},
splitNumber: 10,// 坐标轴的分割段数，只是预估数量，最后的实际显示会根据分割后易读程度进行调整

需求场景：折线图的数值范围在820到960之间，希望Y轴的显示范围从800开始，此时可以按照如上设置。但是如果分割段数不够，会导致距离x轴最近的分割线与其他分割线间距不同。所以此时splitNumber就起到了作用。

2、legend

• 图例形状设置：

legend: {
        icon: "circle", // 圆形，方形：rect
        itemWidth: 10,
        itemHeight: 10,
}

• 方向设置：

orient: 'horizontal'

• 默认选中图例设置：

legend:{
    data:['视频广告','联盟广告','邮件营销','直接访问','搜索引擎'],
        selected:{
            '视频广告':false,
            '联盟广告':false
        }
},

• 图例过多时滚动：

legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: data.legendData,
        selected: data.selected
    },

参考官方示例：https://echarts.apache.org/examples/zh/editor.html?c=pie-legend

3、title

• 位置设置：

title: {
        text: "总人口性别比：108.86",
        textStyle: {
            fontWeight: "normal",
            fontSize: 14,
        },
        left: "20", // 也可设置比例，如'20%'
        top: "20",
    },

4、tooltip

• 普通修改tooltip样式：

tooltip: {
        trigger: "axis", // 触发类型
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            var res = params[0].axisValueLabel + '岁';
            for (var i = 0; i < params.length; i++) {
                res += "<br>" + params[i].marker + params[i].seriesName + "：" + Math.abs(params[i].data);
            }
            return res;
        }
    },

• tooltip样式修改为照片聚焦效果–四角边框样式：

参考链接：https://blog.csdn.net/hahabboom/article/details/104653991

5、适配问题

一般为了达到自适应，echarts外面的div高度或者宽度会使用百分比，在缩放过程中，需要使用resize方法重新加载echarts

window.addEventListener("resize", function () {
                myChart.resize();
            })

• vue自定义指令：

在vue的项目中，左侧菜单收缩后，echarts并没有像想象中那样自适应，此时可以使用’v-'自定义指令实现自适应问题。
参考链接：https://blog.csdn.net/csl125/article/details/89245267

个人感觉自定义指令方法挺好的，实际项目中也用到了这种方法。感谢原文作者！

6、折线图

• 折线图上的圆点设置

series:[{
    type:'line',
    symbol: 'none' // 取消折点圆圈，circle是实心圆点
}]

7、饼图

• 实心圆和圆环的区别：

series: [
    {
        type: 'pie',
        radius: '70%', // 实心
		radius: ['40%', '70%'] // 圆环：第一个是内环半径，第二个是外环半径
    }
]

• 防止标签重叠：

type: 'pie',
avoidLabelOverlap: true

如果标签在圆环的中间，那么，需要设置为false，参考示例：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut

• 标签百分数精度精确到小数点后两位：

type: 'pie',
itemStyle: {
    normal: {
        label: {
            show: true,
                position: "outside",
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < nationData.length; i++) {
                            total += nationData[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(2);
                        if (params.name !== "") {
                            return params.name + "：" + percent + "%";
                        } else {
                            return "";
                        }
                    },
        },
    },
},

• label超出屏幕范围：
  参考链接：https://www.cnblogs.com/zjjDaily/p/8022944.html

8、柱状图

横向或者纵向的设置，是给x轴或者y轴设置type

• 横向：

xAxis: {
    type: 'value'
},
yAxis: {
    type: 'category'
}

• 纵向

xAxis: {
    type: 'category'
},
yAxis: {
    type: 'value'
}

• 柱子顶端圆弧形：

itemStyle:{
    normal:{
        barBorderRadius:[34,34,0,0]
    }
}

• 柱子颜色渐变

itemStyle:{
    normal:{
        color: new echarts.graphic.LinearGradient(0,0,0,1,[{
            offset: 0,
            color: 'rgba(45, 158, 198, 1)'
        },{
            offset: 1,
            color: 'rgba(45, 158, 198, .3)'
        }],false)
    }
}

• 柱状图每个柱子显示颜色不一样

参考链接：https://blog.csdn.net/weixin_38055381/article/details/85242501

结语

以上就是我在项目中遇到的一些图表的需求，整理了一下，也希望能与大佬们互相交流。如果按照我的方法出现了问题，也欢迎及时指正，谢谢大家~