博客园不常在线

有问题联系微信

微信号

微信公众号

前端系列：玩转ECharts之常用图（折线、柱状、饼状、散点、关系、树）

一.背景

最近产品叫我做一些集团系列的统计图，包括集团组织、协作、销售、采购等方面的。作为一名后端程序员，于是趁此机会来研究研究这个库。

如果你仅仅停留在用的层面，那还是蛮简单的。

二.介绍

ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。以前这些系统的图表需求我们都是使用flash去实现的，百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法独立掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5的火热，我们需要寻求一个解决方案。于是在2012年初，当时还是凤巢前端技术负责人的Kener-林峰在凤巢数据平台项目中尝试使用Canvas去做图表，他写了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。

更多详细的自己百度

文档地址(配置项、API等):https://echarts.apache.org/zh/option.html

三.使用

当拿到一到框架或者一个需求的时候，不要着急动手，先看文档或者理解需求

五分钟上手文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

    </body>
</html>

效果：

四.重要的配置项和属性

tooltip:提示框组件

legend:图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

xAxis:直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

yAxis:直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

series:系列列表。每个系列通过 type 决定自己的图表类型

formatter：显示的格式器

取个例子：我们公司一个统计集团下的供应商发布的产品和本公司发布在同行的产品，要用echarts的正负柱状图，如何去实现正数显示在柱子上面，负数显示在柱子下面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
        <script>            
            var myChart = echarts.init(document.querySelector('#main'));

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                     formatter: (params) => {
                        if (!params.length) return ''
                        let s = params[0].axisValueLabel + '<br/>'
                        for (const iterator of params) {
                           // 如果是负数则反转
                          let d = iterator.data < 0 ? -iterator.data : iterator.data
                          s += iterator.marker + iterator.seriesName + '：' + d  + '<br/>'
                        }
                        return s
                      }
                },
                legend: {
                    data: ['准入在售产品数', '发布在售产品数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'value',
                     axisLabel: {
                             formatter: (value) => {
                            // 负数取反 显示的就是正数了
                               if (value < 0) return -value
                            else return value
                             }
                        }
                }],
                yAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['公司1', '公司2', '公司2']
                }],
                series: [
                    {
                        name: '准入在售产品数',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true
                        },
                        data: [320, 302, 341]
                    },
                    {
                        name: '发布在售产品数',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'left',
                            formatter: (value) => {
                                    // 值都是负数的 所以需要取反一下
                                    return -value.data
                                   }
                        },
                        data: [-120, -132, -101]
                    }
                ]
            };
            
            myChart.setOption(option);
        </script>
    </body>
</html>

效果：

 再来讲一个需求吧，需求:显示集团下公司的协作关系图（也就公司和公司之间的协作效果图），也是蛮简单的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

    </head>
    <body>
        <div id='main' style="width:600px; height: 600px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            let categories = [{
                name: "XX有限公司1"
            }, {
                name: "XX有限公司2"
            }, {
                name: "XX有限公司3"
            }, {
                name: "XX有限公司4"
            }, {
                name: "XX有限公司5"
            }];

            let nodes = [{
                "name": "XX有限公司1",
                "value": 1,
                "category": 0
            }, {
                "name": "XX有限公司2",
                "value": 2,
                "category": 1
            }, {
                "name": "XX有限公司3",
                "value": 3,
                "category": 2
            }, {
                "name": "XX有限公司4",
                "value": 4,
                "category": 3
            }, {
                "name": "XX有限公司5",
                "value": 5,
                "category": 4
            }];

            let links = [{
                "source": 0,
                "target": 2
            }, {
                "source": 0,
                "target": 4
            }, {
                "source": 1,
                "target": 3
            }, {
                "source": 2,
                "target": 3
            }, {
                "source": 4,
                "target": 1
            }, {
                "source": 4,
                "target": 3
            }];

            var myChart = echarts.init(document.getElementById('main'));

            var option = {
                legend: {
                    x: 'left',
                    orient: 'vertical',
                    data: categories.map((item) => {
                        return item.name;
                    })
                },
                series: [{
                    type: 'graph',
                    layout: 'force',
                    animation: false,
                    label: {
                        normal: {
                            position: 'bottom',
                            show: true,
                            rich: {
                                bg: {
                                    backgroundColor: '#f5f5f5'
                                }
                            }
                        },
                    },
                    draggable: true,
                    data: nodes.map(function(node, idx) {
                        node.id = idx;
                        return node;
                    }),
                    symbolSize: 40,
                    categories: categories,
                    force: {
                        edgeLength: 150,
                        repulsion: 50,
                        gravity: 0.01
                    },
                    edges: links
                }]
            };

            myChart.setOption(option);
        </script>
    </body>
</html>

效果：

 

posted @ 2020-10-04 22:16  Code技术分享  阅读(1588)  评论(0)  编辑  收藏  举报