ECharts系列:玩转ECharts之经常使用图（折线、柱状、饼状、散点、关系、树）

时间 2020-10-05

标签 javascript html 前端 html5 java 程序员 apache npm 后端前端工程师栏目 JavaScript 繁體版

原文原文链接

一.背景

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

若是你仅仅停留在用的层面，那仍是蛮简单的。html

二.介绍

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

更多详细的本身百度html5

三.使用

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

五分钟上手文档：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>

效果：apache

四.重要的配置项和属性

tooltip:提示框组件npm

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>

效果：