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.直接引用

ECharts使用

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

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);

更换主题

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的具体设置，右边对应生成的图形效果，并且支持在线修改代码和调试图形。

· title：图形的标题。

· legend：图形的图例。

· grid：图形的绘图范围。

· xAxis：图形的x轴，支持同时使用多个x轴，可以是数值、类别值、时间等。

· yAxis：图形的y轴，支持同时使用多个y轴，可以是数值、类别值、时间等。

· polar：使用极坐标时的配置项。

· radar：绘制雷达图时的配置项。

· dataZoom：展示时序数据时的时间范围选择工具。

· visualMap：使用视觉映射时的配置项，就像ggplot2将数据映射到颜色等视觉元素上一样。

· tooltip：当鼠标悬浮在图形上时显示的信息提示框。

· toolbox:ECharts提供的图形编辑工具箱。

· geo：绘制地图时的配置项，定义如何显示地图的范围和样式等。

· parallel：绘制平行坐标时的配置项。

· timeline：定时在多个option之间切换，从而实现动态更新数据的效果。

· color：绘图颜色集合。

· backgroundColor：绘图区的背景颜色。

· textStyle：绘图的文本样式。

· 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