使用ECharts制作交互图形 动态可视化交互

鳄鱼君

发表文章数:643

热门标签

, ,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python » 使用ECharts制作交互图形 动态可视化交互

动态的交互可视化,EChart是基于HTML5中Canvas的一款JS图形可视化工具,使用简单而同意的语法即可实现丰富多样的可视化图形,官方网站:http://echarts.baidu.com/index.html

ECharts引入

新建一个html文件,准备好网页的基本内容,然后像引入JQuery呢样引入ECharts,可以下载到本地引入,也可使用CDN,不用下载直接引入。鳄鱼君这里使用CDN: https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js,直接引入,目前最新版本为4.8.0.直接引用

<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

ECharts使用

首先需要创建一个白色的画板,在HTML中写一个div并设置id,具体代码如下:

<div id="main" style="width: 600px;height: 400px;@media(max-width:600px){width:48%}"></div>

<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script type="text/javascript">
	var myChart=echarts.init(document.getElementById('main')); // 获取画板并进行初始化
	var options={
		title:{
			text:'ECharts4.8.0入门实列' //标题
		},
		tooltip:{},  //提示框
		legend:{
			data:['销量']  //图列
		},
		xAxis:{     //x轴
			data:['苹果','香蕉','橘子','雪梨','凤梨','葡萄']
		},
		yAxis:{},   //y轴
		series:[{   //数据
			name:'销量',
			type:'bar',
			data:[2,34,32,14,23,15]
		}]
	};
	myChart.setOption(options);
</script>


更换主题

ECharts还提供了其他配色方案供选择:http://echarts.baidu.com/download-theme.html,选择喜欢的主题并下载,之后将得到的JS文件引入,初始化的时候指定主题的名称即可

var myChart = echarts.init(document.getElementById('main','vintage'))  // vintage为主题名字

配置项目手册

ECharts最大的好处便是语法高度统一,任何ECharts图形都遵循以上步骤进行绘制,唯一的不同只是option的设置。配置项目手册:https://echarts.apache.org/zh/option.html#title,非常的详细,每个示例页面左边为使用到的全部代码,主要包括用到的数据和option的具体设置,右边对应生成的图形效果,并且支持在线修改代码和调试图形。

  1. · title:图形的标题。
  2. · legend:图形的图例。
  3. · grid:图形的绘图范围。
  4. · xAxis:图形的x轴,支持同时使用多个x轴,可以是数值、类别值、时间等。
  5. · yAxis:图形的y轴,支持同时使用多个y轴,可以是数值、类别值、时间等。
  6. · polar:使用极坐标时的配置项。
  7. · radar:绘制雷达图时的配置项。
  8. · dataZoom:展示时序数据时的时间范围选择工具。
  9. · visualMap:使用视觉映射时的配置项,就像ggplot2将数据映射到颜色等视觉元素上一样。
  10. · tooltip:当鼠标悬浮在图形上时显示的信息提示框。
  11. · toolbox:ECharts提供的图形编辑工具箱。
  12. · geo:绘制地图时的配置项,定义如何显示地图的范围和样式等。
  13. · parallel:绘制平行坐标时的配置项。
  14. · timeline:定时在多个option之间切换,从而实现动态更新数据的效果。
  15. · color:绘图颜色集合。
  16. · backgroundColor:绘图区的背景颜色。
  17. · textStyle:绘图的文本样式。
  18. · series:图形所用的数据系列,其中的type配置项可以指定图形种类,可以是line、bar、pie、scatter、effectScatter、radar、treemap、boxplot、candlestick、heatmap、map、parallel、lines、graph、sankey、funnel、gauge、pictorialBar和themeRiver。

更多内容自己探索,官方配置文档比较详细!

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《使用ECharts制作交互图形 动态可视化交互》 发布于2020-07-12

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

9 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册