博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts 数据统计报表
阅读量:4659 次
发布时间:2019-06-09

本文共 703 字,大约阅读时间需要 2 分钟。

官网   http://echarts.baidu.com/index.html

 

 

  1. 我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局。2.0以后上的版本,需要把开发包放到body下,否则ie低版本会出现属性未找到的错误,导致图标初始化失败。

  2.  

    第二步,普通初始化图表,通过调用开发包方法,有两种初始化方式,

    1.var myChart = echarts.init(document.getElementById("echart"));

    2.var myChart=require('echarts').init(document.getElementById("echart"));

    一般建议使用第一种方法进行初始化操作。

  3.  

    第三步,设置option属性,来给图表设置数据,option是数组元素,tooltip:提示框,legend图例,calculable可设置是否拖拽,series设置数据(data类型也为数组类型),我们开始先随机初始化几条模拟数据,

  4.  

    到这一步,就完成了,图表初始化的步骤,效果如下图所示。然后大家是不是想我们可以改变下图标的样式?答案是可以的,2.0版本为我们留了设置主题的方法,可设置setThem()对图表样式进行修改

  5.  

    我们来看看,主题怎么配置吧,设置色版,设置主题颜色,不一一介绍了,请大家请看下面代码:

  6. 6

    通过上面主题的添加我们就完成了对样式的修改,当然最后大家记嘚设置myChart.setTheme(theme);

转载于:https://www.cnblogs.com/zz-tt/p/6688366.html

你可能感兴趣的文章
Hive新功能 Cube, Rollup介绍
查看>>
webpack:(模块打包机)
查看>>
程序员不得不知的座右铭(世界篇)
查看>>
表格-鼠标经过单元格变色(暂不支持IE6)
查看>>
【每日一学】pandas_透视表函数&交叉表函数
查看>>
实时读取日志文件
查看>>
【寒假集训系列2.12】
查看>>
2018牛客多校第六场 I.Team Rocket
查看>>
Vuex了解
查看>>
c++初始化函数列表
查看>>
JS的this总结(上)-call()和apply()
查看>>
ADO.net 增删改查小练习
查看>>
HDU5795A Simple Nim SG定理
查看>>
2018.10.30 NOIp模拟赛 T1 改造二叉树
查看>>
九度oj 题目1074:对称平方数
查看>>
Zookeeper原理 二
查看>>
android之APP+JNI+Drv框架
查看>>
三阶魔方公式
查看>>
BP算法
查看>>
P1855 榨取kkksc03
查看>>