ECharts3使用入门
来源:互联网 发布:电脑摇号软件 编辑:程序博客网 时间:2024/06/06 20:01
最近项目中有用到百度ECharts,目前版本已经到3了,很多人说百度的这个东西是他最有良心的产品,用起来要比国外的插件简单点,这里主要讲一些简单的应用,算是简单的入门级别的,如果要是想更加的深入可以去看看范例。
1.前期准备
(1)相较于以前好像使用起来更加的简单了,直接引入echarts.min.js。
(2)写一个div用来存放图表。
(3)js代码中根据div的id号获取容器,写图表的相关参数,使用setoption生成图表。
<div id="main" style="width: 600px;height:400px;"></div> <!-- 1.引入echarts.js --> <script src="js/echarts.js "></script> <script> 获取容器的id并赋值给变量myChart var myChart = echarts.init(document.getElementById('main')); /*用来配置参数*/ option = { } /*调用option生成图表*/ myChart.setOption(option) </script>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="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>运行的结果:
3.生成曲线图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="pic4" style="width: 600px;height:400px;"></div> <script src="F:\baidu-echarts\echarts.min.js"></script> <script> var myChart13 = echarts.init(document.getElementById('pic4')); var data = []; option15 = { title: { text: '曲线', }, tooltip: { trigger: 'axis', }, legend: { data:['昨日(11月8日)','今日(11月9日)'] }, grid: { left: '1%', right: '1%', bottom: '3%', containLabel: true }, toolbox: { show: false, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, color:["red","#CD3333"], xAxis: { type: 'category', boundaryGap: false, data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'] }, yAxis: { type: 'value', name: '单位(kW)', axisLabel: { formatter: '{value}' } }, series: [ { name:'昨日(11月8日)', type:'line', data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276], }, { type:'line', name : '今日(11月9日)', data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156], } ] }; myChart13.setOption(option15); </script></body></html>最后的效果:
3.饼状图的制作
只写option的那一部分,其他的和上面的都是一样的。
option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ]};最终效果:
上面就是三个简单的应用,矩形图、曲线图和饼状图的简单实例。
0 1
- ECharts3使用入门
- 使用webpack 使用Echarts3简单入门
- Ionic2中使用ECharts3
- Echarts3 使用详解
- Echarts3.0使用心得
- 使用Echarts3.0做图表
- 浅谈ECharts3 柱形图使用心得
- openlayers与echarts3的结合使用
- Echarts3.0入门基础与实战(学习笔记)
- Echarts3.0的简单使用,动态获取数据
- echarts3 使用((绘制各种图表,地图))
- ECharts3笔记--使用Java快速开发ECharts图表
- echarts3写法
- echarts3实例教程
- echarts3学习
- echarts3 柱状图
- echarts3改动
- vue echarts3
- 过滤器,拦截器,监听器的定义及区别
- SprakStreaming整合Kafka2
- 【每日一个Linux命令】netstat
- js中获得当前时间是年份和月份,形如:201208
- rem,移动端适配心得2【转载】
- ECharts3使用入门
- java 垃圾回收机制详解
- 第十二周:( LeetCode576) Out of Boundary Paths(c++)
- 2004年-2016年软考系统分析师考试论文真题:
- usb-Transfer/Transaction/Packet
- inflate方法两个参数和三个参数的区别
- mysql中格式化日期详解
- css input[type=file] 样式美化,input上传按钮美化
- 学会读JQuery等JS插件源码,通过jQuery理解JavaScript语法,高级语法