数据可视化 Echarts
程序员文章站
2024-02-13 22:56:46
...
一个非常酷炫的图表制作开源js
使用步骤
1.引入下载的echarts文件
举例：
<script src="echarts.min.js"></script>
2.添加一个div标签容器，里面要有id（随意），通过style把宽高的框架设置好，举例：
<script type="text/javascript">
<div id="main" style="width: 600px;height:400px;"></div>
3.新建一个script，在里面通过调用echarts.init()方法初始化一个charts示例，并用document.getElementById()获取上面的id，举例：
var myChart = echarts.init(document.getElementById('main')); //第二步设置的id是main
4.通过一个变量来指定图表的配置项和数据，其中：
title：标题
tooltip：鼠标移动到上面时的提示（就像html的target）
xAxis：代表x轴
yAxis：代表y轴
series：代表对x，y轴进行设置，其value里type代表图标类型，data是数据
举例
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
更多option参考配置项手册文档
http://echarts.baidu.com/option.html#title
5.用setOption()方法使用前面指定的配置项和数据显示图表，结束script，举例：
myChart.setOption(option); //myChart就是前面示例的对象，option是前面的配置信息
</script>
完整示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="echarts.js"></script>
</head>
<body>
<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>
使用其他主题步骤
在导入echarts.js的同时把那个主题的js也导入，然后在init里面加入那个主题的参数就行了，举例：
<script src="echarts.js"></script>
<script src="theme.js"></script>
var myChart = echarts.init(document.getElementById('main'),'theme');
上一篇： nuxt - 路由
下一篇： 数据结构——堆（优先级队列）