Echarts轻松入门，内附踩坑秘籍

Tony 发布于2019-08-29 17:10 / 383人阅读

摘要：中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。注内容摘自官网，原文地址

首先介绍一下我们的主角ECharts

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 **Canvas** 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

入门开始 Echarts引入方式

1.npm或者cnpm安装

cnpm install echarts --save

然后在需要的模块导入

let echarts = require("echarts/lib/echarts");//引入echarts
require("echarts/lib/chart/bar"); //柱状图
require("echarts/lib/component/tooltip");// 提示框
require("echarts/lib/component/title");//标题组件

2.单文件引入（echarts官网）

使用Echarts



    
    ECharts

图表生成如下

注意！！！

Echarts的目标元素要设置高度

否则会报错

resize

当遇到响应式布局高宽不固定时，肯定会发生图表挤压或者显示不全的问题

那么我们将使用Echarts提供的resize(调整大小)方法

首先我们看一下页面生成以后的Echarts元素

每个Echarts图表都提供了唯一ID,我们可以获取这个ID从而操纵对应的Echarts图表

let charId = document.getElementById("main").getAttribute("_echarts_instance_");
echarts.getInstanceById(charId).resize();

当然如果你能直接获取Echarts实例对象，那么就可以直接操作对应的图表啦！（实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用）

setTimeout(function (){
    window.onresize = function () {
        myChart.resize();
       }
},200)

echarts的实例方法非常重要,因为在实际运用中我们的图表的数据不可能是死的，而是动态变化的,实例方法为动态改变数据提供了方法。

注:内容摘自echarts官网，原文地址:http://echarts.baidu.com/doc/...

超融合服务器混合云 php轻松入门跟老齐学python轻松入门内附面试秘籍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114150.html

Echarts轻松入门，内附踩坑秘籍

摘要：中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。注内容摘自官网，原文地址首先介绍一下我们的主角ECharts ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 **Canvas** 类库 ZRen...

YacaToy 2019-08-02 11:55 评论0 收藏0
Echarts轻松入门，内附踩坑秘籍

摘要：中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。注内容摘自官网，原文地址首先介绍一下我们的主角ECharts ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 **Canvas** 类库 ZRen...

tainzhi 2019-08-23 12:49 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0