ECharts学习（1）--简单图表的绘制

1.获取ECharts

　　官网下载：http://echarts.baidu.com/download.html

2.在html页面中引入ECharts文件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ECharts练习</title><script type="text/javascript" src="js/echarts.min.js" ></script>//这里是引入ECharts的js文件</head><body></body>
</html>

文件的目录结构：

3.绘制一个简单的图表

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ECharts练习</title><script type="text/javascript" src="js/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>

4.效果图展示

转载于:https://www.cnblogs.com/wgl1995/p/6229730.html

ECharts学习（1）--简单图表的绘制相关推荐

pyecharts学习(part3)--简单图表绘制及参数优化
学习笔记,仅供参考,有错必究文章目录 pyecharts学习简单图表绘制及参数优化表格反转文本倾斜图像放大设置区域缩放折线图 and 柱状图 pyecharts学习简单图表绘制及参数优 ...
【ECharts学习】—实现我的第一个图表
[ECharts学习]-实现我的第一个图表 <!DOCTYPE html> <html lang="en"><head><meta cha ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
科研ABC - 数据图表的绘制
数据图表的绘制 1 常用软件 1.1 Origin 1.2 Matlab 1.2.1 一系列的高层绘图函数 1.2.2 低层绘图功能 1.3 PowerPoint 1.4 Photoshop 1.5 ...
echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
编程基础---echarts学习
官网 1.5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载, ...
【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表？
说明 [跟月影学可视化]学习笔记. QCharts 图表库 QCharts 是一个基于 spritejs 封装的图表库,可以让用户以组件的形式组合出各种图表:https://www.qcharts.c ...
Echarts学习总结（一）-----柱状图
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...
echarts学习1----格式整理以及地图入门
首先,Echarts是结合html/ javascript一起运用的,可以在线也可以离线使用. 下面是一个.html文件的代码及解析: <!DOCTYPE html> <head&g ...

ECharts学习（1）--简单图表的绘制

ECharts学习（1）--简单图表的绘制相关推荐

最新文章

热门文章