博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts演示笔记
阅读量:4682 次
发布时间:2019-06-09

本文共 1994 字,大约阅读时间需要 6 分钟。

1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。

 

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

 

<body>

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
</body>

2、新建<script>标签引入模块化单文件echarts.js

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js),引入图表文件见

 

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
</script>
</body>

4、<script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成,option见

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

 

以上就完成了一个简单的echarts图表,在真正用的时候要查看文档,找出自己要的属性并设置

转载于:https://www.cnblogs.com/peterpc/p/4310156.html

你可能感兴趣的文章
python缩进可以用在任何语句之后_每天一道Python选择题--python缩进
查看>>
mysql查询左边大于左边_MySQL WHERE 子句
查看>>
java 获取颜色_java关于照片属性的获取,颜色模式
查看>>
CentOS7.5删除旧的内核
查看>>
Java常用的非受检异常
查看>>
HDOJ-2054
查看>>
centos7安装eclipse
查看>>
P3698 [CQOI2017]小Q的棋盘
查看>>
动态规划入门 洛谷P2409 Y的积木
查看>>
【第一季】CH04_FPGA设计Verilog基础(一)Enter a post title
查看>>
Mysql全文索引
查看>>
jmeter(四十四)常用性能指标分析
查看>>
F - 八苦を滅した尼公 POJ - 2763 线段树LCA
查看>>
通过jQuery源码学习javascript(一)
查看>>
源码阅读经验谈-slim,darknet,labelimg,caffe(1)
查看>>
SecureCRT配色方案
查看>>
Unity3D 关于yield在collider中的使用
查看>>
spring-mvc xml文件的最基本配置
查看>>
word 新建一行文字不能左对齐
查看>>
jquery选择器
查看>>