- 引入charts.js
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
- 创建DOM节点
即新建一个div,通过id让DOM节点与Echarts对象绑定起来,记得id唯一。切记DOM一定要有大小
<div id="main" style="width: 600px;height:400px;"></div>
- 新建Echarts对象实例
var myChart = echarts.init(document.getElementById('main'));
-
init的配置项
- theme
https://www.echartsjs.com/zh/download-theme.html在此处是官网写好的主题样式
点击即可下载对应的样式主题。然后将对应的js文件引入到你的html中。就可以使用此主题了。当然Echarts官网也支持自己自定义编写主题。
<script src="../static/js/vintage.js"></script> var myChart = echarts.init(document.getElementById("e_first"),'vintage');
-
Echarts会在DOM中生成canvas或者svg(后面讲),默认是canvas
-
devicePixelRatio(参数是数值型)
设备像素比,默认取浏览器的值window.devicePixelRatio
var myChart = echarts.init(document.getElementById("e_first"),'infographic',{width:500,devicePixelRatio:3});
写法是{ }中,键值对的形式。devicePixelRatio的值是数值型。
当把devicePixelRatio的值设为3的时候发现两图的区别,就是像素发生了变化。
- renderer(参数是字符串型)
渲染器,支持 ‘canvas’ 或者 ‘svg’。默认是canvas,一般canvas适用于web端,svg常用于移动端。
var myChart = echarts.init(document.getElementById("e_first"),'infographic',{renderer:'svg'});
- width height(参数是数值型或字符串行)
对应着画布的宽高,如果传入值为 null/undefined/‘auto’,则表示自动取 dom(实例容器)的宽度。
var myChart = echarts.init(document.getElementById("e_first"),'infographic',{renderer:'svg',width:'500'});
3.配置项option(这里的配置项很多,我们先拿以下这个例子讲解)在官网可以看到。
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
- title
这个帮助文档怎么看?
title: {
text: 'ECharts 入门示例',
target : 'blank',
textStyle : {
color : 'blue',
}
},
首先,这些参数都是以json形式存在的。target属性直接以键值对的形式即可。而color属性是在textStyle下的,相当于两层的json。