Echarts 30分钟入门

echarts 作为一个常用的数据可视化库,功能非常强大,最关键是使用非常简单:传参就行。但作为一个完全没用过echarts的人来说,通过看官方的文档来上手,花时间不说,还不一定看得明白(我地一次看就有点懵)。所以本文的目的就是要让一个完全没用过 echarts 的人在半小时内学会 echarts 的大部分用法。

1. echarts API 设计原则:配置优先,组件化

myChart.setOption(option, true); 

echarts 图表的展示效果都是由 options 决定。options 是一个对象,可以配置图表的各种组件,组件组合后在画布(grid)上展示出来,就生成了图表。

以下是常用的组件配置:

  • 标题组件(title)
  • 图例组件(legend)
  • 画布组件(grid)
  • x坐标轴组件(xAxis)
  • y坐标轴组件(yAxis)
  • 数据(series)
  • 提示框组件(tooltip)

    提示框组件可以设置在多种地方:

  • 全局,即 tooltip

  • 坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip
  • 系列中,即 series.tooltip
  • 系列的每个数据项中,即 series.data.tooltip

  • 缩放过滤组件(dataZoom)

  • 坐标轴指示器(axisPointer)

    一般来说,axisPointer 的具体配置项会配置在各个轴中(如 xAxis.axisPointer)或者 tooltip 中(如 tooltip.axisPointer)。但是这几个选项只能配置在全局的 axisPointer 中:axisPointer.triggerOn、axisPointer.link。

多 grid 下的 axisPointer 有很多坑。

  • 工具栏(toolbox)

    内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具

2. echart 图表组成部分,及在 option 中对应的 key

echart组件 echart组件

3. echart 如何把组件合成图表

图表绘制在画布(grid)中,通过组件的 gridIndex 来指定此组件作用于哪个画布(grid)。比如上面的示例图的 option 如下:

4. 一个基本的 option 配置

var legendText = '销量(图例)';
var legendText2 = '图例2';
var legendText3 = '图例Pie图';

var option = {
    /**
     * 标题,包含主标题和副标题
     * 可以配置任意个标题
     */
    title: [
        {
            textAlign: 'center',
            text: '标题1',
            left: 100,
            top: 20,
            link: 'https://www.baidu.com',
            textStyle: {
                fontSize: 12,
                color: '#666666',
            },
            subtext: '副标题1'
        },
        {
            textAlign: 'center',
            text: '标题2',
            left: 400,
            top: 20
        }
    ],

    /**
     * 支持任意个图例
     */
    legend: [
        {
            left: 20,
            bottom: 10,
            data: [{
                name: legendText, // legend.data.name 必须与 series.name 一样
                // 强制设置图形为圆。
                icon: 'circle',
                // 设置文本为红色
                textStyle: {
                    color: 'red'
                }
            }]
        },
        {
            left: 120,
            bottom: 10,
            data: [{
                name: legendText2
            }]
        },
        {
            left: 420,
            bottom: 10,
            data: [{
                name: legendText3
            }]
        }
    ],

    /**
     * 可以认为是图表画布
     */
    grid: [
        {
            x: 80,
            y: 80,
            width: 200,
            height: 200,
            show: true,
            backgroundColor: 'rgb(128, 128, 128)',
        },
        {
            x: 350,
            y: 80,
            width: 300,
            height: 250,
            show: false
        }
    ],
    /**
     * x 轴配置。可以任意个
     */
    xAxis: [
        {
            type: 'category',
            gridIndex: 0, // 这个值很重要,用于指定图表组件属于哪个画布
            data: [
                'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
            ],
            tooltip : {
                trigger: 'axis',
                axisPointer : {
                    type : 'cross'
                }
            }
        },
        {
            show: false, // 隐藏此 x 轴
            type: 'category',
            gridIndex: 1,
            data: [
                2011, 2012, 2013, 2014, 2015
            ],
            axisPointer: {
                show: true,
                type: 'line',
                label: {
                    show: true,
                    formatter: function (params) {
                        return echarts.format.formatTime('yyyy-MM-dd', params.value);
                    },
                    backgroundColor: '#004E52'
                }
            },
        }
    ],
    /**
     * y 轴配置。可以任意个
     */
    yAxis: [
        {
            type: 'value',
            gridIndex: 0
        },
        {
            type: 'value',
            gridIndex: 1
        },
        {
            type: 'value',
            name: '降水量',
            min: 0,
            max: 250,
            position: 'right',
            gridIndex: 1,
            offset: 10,
            axisLine: {
                lineStyle: {
                    color: 'purple'
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
        }
    ],

    /**
     * 数据配置。可以任意个
     */
    series: [
        {
            name: legendText,
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [
                120, 200, 150, 80, 70, 110, 130
            ],
            type: 'bar',
        },
        {
            name: legendText2,
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [
                120, 200, 150, 80, 70
            ],
            type: 'line'
        },
        {
            name: legendText3,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [
                {
                    value: 120,
                    tooltip: {
                        trigger: 'item',
                        showContent: true,
                        formatter: function (params) {
                            return `${params.name}:${params.value}`;
                        },
                        position: ['center', 'center']
                    },
                },
                {
                    value: 200
                },
                {
                    value: 150
                },
                {
                    value: 80
                },
                {
                    value: 70
                }
            ],
            type: 'bar'
        }
    ],

    /**
     * 工具栏:内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具
     */
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    /**
     * 在 option 根上要声明 tooltip 才能启用 series.tooltip/series.data[i].tooltip
     * 为每个gird配置特定tooltip方法:
     * 1. 先在 option 根配置: tooltip: {showContent: false}
     * 2. 在特定series.data配置 tooltip: { trigger: 'item', showContent: true, formatter: function() {} }
     */
    tooltip: {showContent: false}
};

5. 小结

本文主要围绕 echarts 的配置项来介绍了 echarts 的入门知识,希望对大家有用,以上。

留言列表
  • lkt:
    请问题下,部署服务器时需要把那些文件上传到服务器部署,是只有打包后的dist文件夹,还是说要把整个my-project的根目录一起上传到服务器
      2019年05月27日 14:29 回复
    • lm:
      数据的预取总是失败,求大佬指教下,实现了个ssr,但是总觉得我实现的ssr不对
        2019年03月15日 16:46 回复
      • ewr:
        eqr
          2018年09月21日 09:17 回复
        • 小王:
          你好,请问一下,官网demo 跑起来了,但是用浏览器http://localhost:8080.一直加载不出来是怎么回事呢?
            2018年09月20日 14:50 回复
          • dk:
            请教博主一点问题,目前我的ssr项目已基本完成开发,但不知如何部署到虚拟服务器centos7中,具体的问题是不懂需要将哪些代码上传到服务器并使用pm2来启动项目.希望博主有空回答下,谢谢.
            • u3xyz:
              你好,其实这个问题与“hp5”的问题有点类似,你可以看下那个回复,理论上构建生成的所有前端资源文件都会用到,都需要放到服务器
              2018年09月11日 21:47
            2018年09月11日 20:18 回复
          • hp5:
            你好,vue-ssr开发基本没什么问题,但是不知道如何部署,希望请教一下,上线部署时,需要将那些文件给后端,希望博主有时间回复一下,谢谢。
            • u3xyz:
              你好,所谓VueSSR,本质是在前后端共用一套js代码,在Node环境下直接吐出页面的过程。SSR一定是在Node环境 ,这个与Java,php等传统后端没什么关系(后端只提供数据接口),也就谈不上要给他们什么文件了,独立部署即可。
              2018年07月25日 10:36
            2018年07月24日 13:10 回复
          • lgf:
            我的项目是vue-cli 然后 实现ssr seo渲染
              2018年07月03日 19:07 回复
            • lgf:
              你好,我现在也是有SEO需求,SSR做,在浏览器打开的时候显示网页源代码可以看到详细的html,增加百度搜索更多的关键子,现在我ssr还是不太能行,用了个prerender-spa-plugin,但是这个插件问题太多,你这篇文章我看了一遍我实现有点困难,(比较菜) 有没有再详细点的教程呢 需求比较着急,所以问问您还有再详细点的demo吗
              • u3xyz:
                推荐多参考官方Demo: https://github.com/vuejs/vue-hackernews-2.0/
                2018年07月25日 10:28
              2018年07月03日 19:05 回复
            • 小白白:
              刚开始研究 我有一个问题 开发过程中我修改代码 就要重新打一次包么?怎么实现热更新啊 希望指点一下
                2018年06月29日 11:40 回复
              • 木メメ木+大:
                你好,发现你的博客的一个现象:比如在第二页点击进入详情,然后按下浏览器返回,就回到第一页,这个是博主刻意为之的吗? 另外特别想请教一下,左右目录联动的实现~
                • u3xyz:
                  第一个问题:你是说在第二页的文章返回时默认到了第一页吗?这个不是刻意为之,算小bug吧 第二个问题:可以参看我的文章《如何实现markdown文章标题导航》
                  2018年06月28日 12:33
                2018年06月27日 11:46 回复
              • 昌子:
                最近在做ssr,前面过程很顺利,到后面npm run build时,会爆出一个elementUI的样式错误,搞了好几天了还是无头绪,有时间帮忙看下吗?项目急上线
                • u3xyz:
                  这个得你自己想办法解决哈
                  2018年06月28日 12:31
                2018年06月26日 22:56 回复
              • meme:
                不太懂服务端,骨架屏倒是实现了,ssr看了好多,明白大致流程,就是对服务端不太了解,首先阿里买个云主机,然后你用sheel 连接ssh 登录 起一个www服务器,那么数据库放哪里呢,怎么就线上也能用了?还有node 服务放哪里,还有比如我是node写的接口,怎么弄呢。最近又看了 nginx 是说可以静态资源转发,不太明白其中的流程。期望大佬,写篇文章。或者私信一下。谢谢了
                • u3xyz:
                  可以看看文章中的服务器部署模块。我只用了一台阿里云主机,node服务,nginx,数据库都是在这台机器上
                  2018年06月28日 12:30
                2018年06月26日 21:10 回复
              • PlainHeart:
                作者,您好,我最近刚开始研究这个,按照您的文档我并不能实现功能,希望在配置上能给予一些更详细的帮助,谢谢!
                • u3xyz:
                  首先,得耐心一点,我也不是一下就很顺利得做出来了,那里有问题就想办法解决。此文章也只是列出了关键步骤,并不是所有的步骤。建议多研究官方示例vue-hackernews-2.0,或者试试Nuxt.js
                  2018年06月28日 12:28
                2018年06月23日 17:55 回复
              • ljc:
                你好,本人刚接触vue-ssr,开发的时候基本没什么问题,但是不知道如何上线部署,想请教一下,上线部署的时候 ,需要把哪些文件给后端呢,希望博主有时间回复一下
                • u3xyz:
                  你好,回复已经单独发qq邮箱(7048***)
                  2018年04月21日 00:56
                2018年04月20日 15:33 回复

              发表评论: