Echarts学习—构建图表

相信有很多的前端开发人员在开发Echarts图表的过程中都遇到对图表结构过无从下手,面对一大堆的专业词汇一脸懵逼的样子,在经过了一段时间的踩坑后,终于摸索出了一套完善的学习方法

首先来进行图表构造

图表构建

本次以 VUE 为案例

创建并引入一个Echarts图表(只展示代码部分,配置环境等略过)

<template>
<div class="chart-box">
<div id="myChart" ></div>
</div>
</template>
<script>
export default {
created(){
},
mounted(){
this.newcharts();
},
methods: {
newcharts(){
// 基于准备好的dom,初始化echarts实例
//记得给予图表宽高
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
});
}
} }
</script>
<style scoped>
#myChart{
width: 100%;
height:100%;
}
</style>

图表创建报错Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

这种情况是渲染的容器还未生成,所以出现错误

这种情况我们可以用ref和$refs 来代替document.getElementById()获取该图形容器对象

为此我们在构建的容器上添加ref

之后代码如下

 var charts_new = this.$refs.mychart;
if (charts_new){
let myChart = this.$echarts.init(charts_new)
myChart.setOption({
//省略
})
}

这样就可解决上述问题了

Echarts构建图表的更多相关文章

  1. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  2. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  3. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  4. echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

    这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...

  5. Echarts导出为pdf echarts导出图表(包含背景)

    Echarts好像是只支持png和jpg的导出,不支持pdf导出.我就想着只能够将png在后台转为pdf了. 首先介绍一下jsp界面的代码. var thisChart = echarts.init( ...

  6. echarts的图表根据父容器大小的改变而改变(弹窗easy-ui的window窗口)

    1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制.所以把绘制图表的方法提出来. <div class="echart"> <div ...

  7. 小程序Echarts 构建中国地图并锚定区域点击事件

    小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...

  8. echarts 实战 : 图表竖着或横着是怎样判定的?

    这个问题比较简单. echarts 的图表默认是竖着的. 只要 xAxis 和 yAxis 互换,竖着的图就变成了横着的图了. 所以我们可以可以写一个xy轴互换的方法. reverseXYAxis = ...

  9. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

随机推荐

  1. IDEA(JAVA)使用json

    首先介绍一下json SON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定的 ...

  2. ansible Ansible Galaxy ansible-playbook 安装 使用 命令 笔记 生成密钥 管控机 被管控机 wget epel源

    笔记 ansible 安装 与salt对比 相同 都是为了同时在多台机器上执行相同的命令 都是python开发 不同 agent(saltstack需要安装.ansible不需要) 配置(salt配置 ...

  3. retailMall-vuedemo1

    //home.vue <template> <div class="home"> <div class="top-info"> ...

  4. MaxCompute助力小影短视频走向全球化

    数字时代,中国已经成为世界互联网的中心,小影(海外版称作为VivaVideo,后简称VivaVideo)作为国内首批短视频出海企业,借助统一的云计算平台快速实现全球业务的线上部署,已经让每一行代码都获 ...

  5. js、php判断手机PC

    用于phpcms <script type="text/javascript"> var url = window.location.href; if(/Android ...

  6. HDU_2035:人见人爱A^B

    Problem Description 求A^B的最后三位数表示的整数. 说明:A^B的含义是“A的B次方”   Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1< ...

  7. jQuery 图片高亮显示

    主要的jQuery代码: $(function() { $("ul li").hover(function() { // over //鼠标移入当前列透明度为1 其他列为0.5 $ ...

  8. kubernetes1.3:操作Docker

    Kubernetes对Docker的管理是通过一个第三方组件实现的.在Kubernetes1.2中这个第三方组件就是go-dockerclient,这是一个GO语言写的docker客户端,支持Dock ...

  9. selenium 图片上传

    WebElement  file = driver.findElement(By.name("filename")); 给此元素设置值:file.sendKeys("E: ...

  10. 报错No module named IPython的解决方法

    没有按照 ipython 或者 ide 没有选择编译器