Mr. Zhang
Mr. Zhang

前端开源图表库ECharts配置教程

1、简介

ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2、安装

（1）直接下载 echarts.min.js 并用< script >标签引入。echarts下载链接
（2）还可以使用CDN方法加载网络上的文档
Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
百度：https://echarts.baidu.com/dist/echarts.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

3、ECharts的初始化

（1）引入 ECharts 文件

引入本地文件

<script src="js/echarts.min.js"></script>

CDN方式

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
（2）创建容器

为Echarts创建一个具备宽高的DOM容器。

<div id="main" style="width: 600px;height: 600px;"></div>
（3）初始化ECharts

通过echarts.init()方法传入指定的容器(DOM元素)来生成一个ECharts对象。

<script type="text/javascript">
	var myChart = echarts.init(document.getElementById("main"));
</script>

4、ECharts的基本配置

ECharts需要通过一个Option对象来进行配置，配置信息采用的是json格式。

Option对象的常用属性有：标题(title)、图例(legend)、网格(grid)、提示信息(tooltip)、x轴(xAxis)、y轴(yAxis)、系列列表(series)等，接下来将会对每个属性进行介绍。

var option = {
	title:{},	//标题
	grid:{},	//网格
	tooltip:{},	//提示信息
	xAxis:{},	//x轴
	yAxis:{},	//y轴
	series:[{}]	//系列列表
}

前端开源图表库ECharts配置教程_第1张图片

（1）标题(title)

标题组件，包含主标题和副标题。

title: {
	//主标题
    text: '未来一周气温变化',
    //副标题（可选）
    subtext: '纯属虚构',
    //主标题文本样式
    textStyle:{
    	//颜色
		color:'#e4393c',
		//字体风格，默认normal，有italic(斜体) | oblique(斜体)
		fontStyle:'normal',
		//粗细 normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
		fontWeight:"lighter",
		//字体，默认微软雅黑
		fontFamily:"san-serif",
		//字体大小，默认为18px
		fontSize:18	
	},
	//副标题文本样式
	subtextStyle: {
            color: '#aaa'
    },
	//标题背景色，默认透明，也可以使用 RGB：'rgb(128, 128, 128)'、RGBA：'rgba(128, 128, 128, 0.5)'或十六进制颜色。
	backgroundColor:"#ccc",
	//标题的边框颜色，颜色格式支持同backgroundColor
	borderColor:"red",
	// 水平安放位置，默认为左对齐，可选为：'center' | 'left' | 'right'
	x: 'left',
	//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
	y: 'top'
}
（2）图例(legend)

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
	//图例的数据数组
	data: ['蒸发量', '降水量'],
	//图例组件离容器左侧的距离，可以是像素值或百分比也可以是 'left' | 'center' | 'right'
	left: "left",
	//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
	orient: 'horizontal',
	// 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right'
	x: 'center',               
    // 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
    y: 'top',
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc', 
    // 图例边框线宽，单位px，默认为0（无边框）
	borderWidth: 0, 
	//图例文本样式
	textStyle: {
    	color: '#333',
    	fontSize:18	
    }
}
（3）网格(grid)

grid 为直角坐标系内绘图网格，可以通过设置 x y x2 y2 的值，控制图表的摆放位置（位于当前canvas的坐标轴）。

grid:{
	//直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比
	x:50,
	//左上纵坐标
	y:55,
	//右下横坐标
	x2:50,
	//右下纵坐标
	y2:60,
	backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
}
（4）提示信息(tooltip)

鼠标悬停的提示信息。

tooltip: {
	//是否显示提示框组件
	show: true,
	//触发类型： 'item'数据项图形触发（饼图）、'axis'坐标轴触发（柱状图、折线图）
	trigger: 'axis',
	//文本样式
	textStyle: {
    	color: '#fff',
    	fontSize:20
    },
    //显示延迟，添加显示延迟可以避免频繁切换，单位ms
    showDelay: 20,  
    //隐藏延迟，单位ms          
    hideDelay: 100,  
    //动画变换时间，单位s         
    transitionDuration : 0.4,  
    backgroundColor: 'rgba(0,0,0,0.7)', 
    borderColor: '#333',
    //提示边框圆角，单位px，默认为4 
    borderRadius: 4,           
    borderWidth: 0
}
（5）x轴(xAxis)

直角坐标系 grid 中的 x 轴，配置要在 X 轴显示的项。

xAxis: {
	//坐标轴名称
    name: '类别',
	//坐标轴类型 
	//'value' 数值轴，适用于连续数据。
	//'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
	//'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化。
	//'log' 对数轴。适用于对数数据。
	type: 'category',
	//类目数据
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]   
}
（6）y轴(yAxis)

直角坐标系 grid 中的 y 轴，配置要在y轴显示的项，配置方法同上。

（7）系列列表(series)

系列列表为数组类型，可以包含多个系列，每个系列通过 type 决定自己的图表类型。

series: [{
	//系列名称
	name: '消息分析',
	//系列图表类型 bar(柱状图)、line(折线图)、pie(饼图)...
	type: 'line',
    //系列中的数据
    data: [100,200,300]
}]

5、ECharts的数据显示

通过ECharts对象的setOption()方法传入Option对象进行数据的显示。

// 使用指定的配置项和数据显示图表。
myChart.setOption(option);

6、ECharts对象的常用方法

（1）setOption(Object option,[boolean notMerger])
  • 参数1：Option对象，表示图表的数据结构。
  • 参数2：是否合并option。默认为false，可以不设置。

万能接口，配置图表实例任何可配置选项，多次调用时option选项默认是合并（merge）的，如果不需要合并，可以通过notMerger参数为true阻止与上次option的合并。

（2）getOption()

返回内部持有的当前显示的option。

（3）setSeries(Array series,[boolean notMerge])
  • 参数1：Array类型的series序列数据。
  • 参数2：是否合并series，默认为false，可以不设置。

数据接口，驱动图表生成的数据内容，效果等同调用setOption({series:{…}})

（4）getSeries()

返回内部持有的当前显示series，效果同return getOption().series

（5）addData(….)

参数列表

  • int seriesIdx ：表示给哪一条series添加数据，series脚标从0开始；
  • Object data：要添加的数据；
  • [boolean isHead]：是否队头加入，不指定或false时为队尾插入；
  • [boolean dataGrow]：是否增长数据队列长度，不指定或false时移出目标数组对位数据 ；
  • [string additionData] 是否增加类目轴(饼图为图例)数据。
（6）on(string eventName,function eventListner)

添加事件绑定，支持的事件有：
REFRESH，RESTORE，CLICK，HOVER，DATA_CHANGED，MAGIC_TYPE_CHANGED，DATA_VIEW_CHANGED，DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED，MAP_SELECTED

（7）un(string eventName,function eventListner)

解除某个事件绑定。

（8）showLoading([Object loadingOption])

过渡控制，显示loading（读取中）。

//MyCharts.showLoading(); 默认样式
Mycharts.showLoading({
	text: "图表数据正在努力加载...",
	x: "center",
	y: "center",
	textStyle: {
		color:"red",
		fontSize:14
	},
	//loading效果，可选为：'spin'|'bar'|'ring'|'whirling'|'dynamicLine'|'bubble'
	effect:"spin"
});
（9）hideLoading()

隐藏图表数据加载过度提示信息。

（10）refresh()

刷新图表，图例选择、数据区域缩放，拖拽状态均保持。

（11）restore()

还原图表，各种状态均被清除，还原为最初展现时的状态。

（12）clear()

清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源需要dispose()。

（13）dispose()

释放图表实例，释放后实例不再可用。

7、完整实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts图表完整实例</title>
    <!--引入echarts.min.js文件-->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>

<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '温度'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {
            x: 50,
            y: 55,
            x2: 50,
            y2: 60,
            backgroundColor: 'rgba(0,0,0,0)',
            borderWidth: 1,
            borderColor: '#ccc'
        },
        legend: {
            data: ['度数']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '度数',
            type: 'line',
            data: [15, 21, 20, 25, 30, 23]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</html>

你可能感兴趣的:(web前端)