简单的echart使用方法

1.引入外部echart的js文件

<script type="text/javascript" src="js/echarts.min.js"></script>

2.建立放置容器，div使用放置容器布局

`
放置容器配置

    <style>body {text-align: center;}#domain1 {width: 600px;height: 400px;}</style>`

div格局应用

<div id="domain1">
</div>`

3.编写javascript

a.初始化echarts案例

var myCharts=echarts.init(document.getElementById(“id(容器id)”));

b.指定图表配置，添加数据，完成option配置

var option={

}

c.使用指定的配置和数据显示

myCharts.setOption(option);

4.实例演示:

源码:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>pine chart</title><script type="text/javascript" src="js/echarts.min.js"></script><!-- 容器css配置 --><style>body {text-align: center;}#domain1 {width: 600px;height: 400px;}</style>
</head><body><h1>echart初学</h1><div id="domain1"></div><script type="text/javascript">//初始化echarts案例var myCharts = echarts.init(document.getElementById("domain1"));//指定图表配置，添加数据//1.柱状图var option = {title: {text: '期中考试成绩'},tooltip: {},legend: {data: ['人数']},xAxis: {data: ["60分以下", "60~69", "70~79", "80~89", "90~99", "100"]},yAxis: {},series: [{name: '人数',type: 'bar',data: [5, 15, 36, 10, 7, 1]}]};//使用指定的配置和数据显示myCharts.setOption(option);</script>
</body>
</html>

运行结果:

option配置里的引用可以去官网找，根据自己的个人需求修改即可。echart官网

echart的js也可以去官网下载，或者使用下面这个免费的连接。echart免费资源

初学echart的简单使用相关推荐

EChart.js 简单入门
EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
NHibernate初学二之简单执行SQL及HQL、Linq
上篇文章简单介绍NHibernate之简单增删改查,本文将会简单介绍有关执行NHibernate的SQL.HQL及存储过程: 一:执行SQL语句实例,运用CreateSQLQuery方法 public ...
Android初学之自定义简单蛛网（雷达）图
因项目需要,需要加入蛛网图的显示,虽然GitHub上早已有很多大神的nb框架,但是还是想自己写写练练手. 项目中显示的蛛网图也比较简单,只需要控制四个进度值,这样就不需要考虑角度旋转的问题了 ,只需要 ...
初学Vue——编写简单的日程计划
初学Vue基础语法刚刚接触Vue框架了解了一些有关于Vue的基础语法知识,觉的在实现一些功能上,不用去操作DOM是真的很方便- 我做了一个简简单单的一个日程计划(引入了Bootstrap.lay ...
初学html---标签简单实用
标签简单使用段落:<p> 标题:<hx> 强调:加粗<strong> 斜体<em> 单独设置样式<span> 引用:短文本<q& ...
qt 初学创建一个简单的计算器
1.1qt 计算器的创建工程创建和我们前面一样英文名 widget类然后进入工程 1.2三个文本编辑框一个组合框一个标签 1.3调整布局然后双击组合框按下加号加入加减乘除的符号 1. ...
echart折线图删除_用Echart创建简单的折线图
pageEncoding="UTF-8"%> 机组耗电量统计图 layui.use('element', function() { var $ = layui.jquery, ...
初学unity（简单的视觉欺骗）
unity3D中是三维的世界,而在视角中(无论摄像头的角度如何)它都算是某个方向的视图(例如主视图).而前我的两篇博客,利用摄像头的移动与背景的移动都是利用了这个技巧,在最后的成像中造成场景移动的情景 ...
卷积层网络CNN初学笔记（简单代码）
学习网站:https://www.bilibili.com/video/av20542427?p=20 传统神经网络:权值太多,计算量太大,需要大量样本进行训练. 卷神经网络CNN:通过感受野和权值共 ...

初学echart的简单使用

简单的echart使用方法

1.引入外部echart的js文件

2.建立放置容器，div使用放置容器布局

3.编写javascript

a.初始化echarts案例

b.指定图表配置，添加数据，完成option配置

c.使用指定的配置和数据显示

4.实例演示:

初学echart的简单使用相关推荐

最新文章

热门文章