Echarts

无标签

前端

发布日期: 2022-03-26

文章字数: 1.4k

阅读次数:

Echarts.js

Echart.js，它是由百度公司开发的一个使用JavaScript实现的开源可视化库（同时也有D3.js，它是国外的可视化库），兼容性强，底层依赖轻量级的 Canvas 类库 ZRender，可高度个性化定制数据可视化图表（移动端pc端都兼容）

安装：

npm install echarts --save

官网：https://echarts.apache.org/zh/index.html

前端可视化工具

常见工具：ECharts、g2、d3、vis、hightChart等

g2框架封装：bizcharts（react）、viser（vue）

地理可视化：g2、L7、高德的loca、菜鸟的鸟图

3D可视化：three.js

使用步骤

引入Echarts文件

可以通过导入

import * as echarts from 'echarts'

也可以直接放在全局，直接使用

Vue.prototype.$echarts = window.echarts

准备呈现图表的盒子（一定要有宽高，比如width: 600px; height: 400px）
初始化echarts对象

init方法：
```
(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number,
    renderer?: string,
    useDirtyRect?: boolean, // 从 `v5.0.0` 开始支持
    width?: number|string,
    height?: number|string,
    locale?: string
}) => ECharts
```
创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

参数
- dom
  
  实例容器，一般是一个具有高宽的div元素。
  
  注：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。
  
  ECharts 3 中支持直接使用canvas元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用 echartsInstance.getDataURL 生成图片链接相比可以支持图表的实时刷新。
- theme
  
  应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。参见 ECharts 中的样式简介。
- opts
  
  附加参数。有下面几个可选项：
  - devicePixelRatio 设备像素比，默认取浏览器的值window.devicePixelRatio。
  - renderer 渲染器，支持 'canvas' 或者 'svg'。参见使用 Canvas 或者 SVG 渲染。
  - useDirtyRect 是否开启脏矩形渲染，默认为false。参见 ECharts 5 新特性。
  - width 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。
  - height 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。
  - locale 使用的语言，内置 'ZH' 和 'EN' 两个语言，也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n。
    
    如果不指定主题，也需在传入opts前先传入null，如：
```
const chart = echarts.init(dom, null, {renderer: 'svg'});
```
准备配置项
将配置设置给echarts实例对象（配置是可以设置多次，叠加设置，这样可以分离数据的代码和初始化的代码）

import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例(如果是vue则用ref获取)
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    //标题
    title: {
        text: 'ECharts 入门示例'
    },
    //通用配置，可设置对图表接触事件
    tooltip: {
        //默认mousemove，移动到每一项触发光标和详情信息
        trigger:'item',
        //设置后要click，点击才会有信息提示
        triggerOn:'click'
    },
    //工具栏，里面有很多好用的工具
    toolbox:{
        feature:{
            //可以直接到导出图片的功能
            saveAsImage:{}
        }
    }
    //x轴
    xAxis: {
        type: "category",
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    //y轴
    yAxis: {
         type: "value",
         scale:true    //让数据不会从0开始
    },
    //系列列表，通过type决定图表类型，可以有多个对象
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});