认识 ECharts

ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

ECharts 有哪些特点

ECharts 属于开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，

另外还提供了柱状图、折线图、饼图、气泡图及四象限图等； ECharts 使用简单，在官网中为我们封装了 JS，只要会引用就会得到完美的展示效果； ECharts 种类多，ECharts 实现简单，各类图形都有；相应的模板，还有丰富的 API 及文档说明，非常详细； ECharts 兼容性好，基于HTML5，有着良好的动画渲染效果。

如何安装ECharts

获取 ECharts

你可以通过以下几种方式获取 ECharts。

有webpack/parcel

在typescript+Vue的项目中引用echarts，为了加强引用，引入echarts和@types/echarts两个包，一个是工程依赖，一个是声明依赖。

yarn add echarts
yarn add --dev @types/echarts

然后在需要引用echarts的组件中引入echarts

import echarts from 'echarts';或者var echarts=require('echarts')

无webpack/parcel

通过 BootCDN 等 CDN 引入,搜索echarts，在结果里面找带min的，放到 index.html 上

然后使用全局变量window.echarts

下面这2种挺麻烦的，一般不推荐

从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。
在 ECharts 的 GitHub 获取。

使用ECharts

更换主题

让你的图表整体换个装，除了官方提供的主题之外，还可以定制你自己的主题

使用方法

html
<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>

点击事件

在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});

移动端自适应

有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。

为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。

常规技巧

meta:viewport 抄淘宝手机版（大厂的代码肯定没问题）
用JS获取屏幕宽度设置在div上

const width = document.documentElement.clientWidth

设定宽高比

main.style.width=`${width}px`

main.style.height=`${width*1.2}px`
//个人经验使用1.2倍

echarts提供的功能

baseOption+media

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {maxWidth:500},   // 第二个规则。最大宽度小于500时执行以下代码
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

查询文档

ECharts的文档写的很不错，

例子也有很多，基本想要什么类型抄过去改就好了

ECharts-非常好用的图表库