html5,静态页面用echarts快速做漂亮的图表
来源:互联网 发布:藏文翻译软件 编辑:程序博客网 时间:2024/04/27 23:15
最新任务,找个漂亮的图表插件给做大数据的用,他们做的太丑了。于是,发现有个echarts的,百度弄的图表插件吧。还很不错。
如果图表数据动态生成那没我事,这边要用来做静态页面。
首先,echarts的官网
http://echarts.baidu.com/
点击“实例”
http://echarts.baidu.com/examples.html
里面有好多图表,找个差不多的
点击以后,页面左边有代码
重新开个页面,点击下载里面的表格工具
点开以后,
把execl里的数据填进去,记得要竖着填写
根据实例里面数据格式,选择转换工具
将结果复制到对应位置并替换,修改相应文字
然后,点击运行可以预览下
拷贝教程里的html5,修改引用链接,
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="http://cdn.bootcss.com/echarts/3.2.3/echarts.min.js"></script></head><body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>
把实例里面改过的option复制过来然后保存,保存html文件,就可以看到了
这个时候,再美化下,点击主题构建
左边有选择默认样式的,左下还可以具体定制,右边能实时显示效果
样式调好以后,点击下载主题,下载js文件
将下载的js文件和html文件放一起
在html里引用下载的脚本并修改初始化方法
这下就变成漂亮的图表了
2 0
- html5,静态页面用echarts快速做漂亮的图表
- 分享几个用Echarts做的图表
- 分享几个用Echarts做的图表2
- 分享几个用Echarts做的图表3
- 非常漂亮的静态页面
- 利用Echarts图表的tooltip在做一个图表
- Story board 的静态 cell 。快速做页面
- 5、Power Query-抓取网页数据做漂亮的图表
- Echarts3.0:实现一个页面放多个Echarts图表的方法
- echarts: 图表的搬运工
- echarts图表的使用
- 漂亮的OWC图表
- 基于html5 Canvas图表库 : ECharts
- 基于html5 Canvas图表库 : ECharts
- 基于html5 Canvas图表库 : ECharts
- html5做的登陆页面
- 使用echarts做动态数据 图表
- 如何快速使用ECharts绘制可视化图表
- iOS 9 新特性
- [Python]Python爬虫之Scrapy框架安装配置
- echarts饼图间距
- OpenGL使用顶点数组进行图形的绘制
- 使用 RMI + ZooKeeper 实现远程调用框架
- html5,静态页面用echarts快速做漂亮的图表
- js获取URL地址 (路径)
- class viewController has no initializers解决办法
- VO、DTO、DO、PO的概念、区别和用处
- shrio 权限管理filterChainDefinitions过滤器配置
- debian下搭载qt+opencv的开发环境
- POJ 3597 Polygon Division:题目解答源码
- 经典算法Semi-Global Matching(SGM)文献笔记(一)
- spring mvc 集成 jcaptcha 生成图形验证码