ECharts的基本使用
ECharts官网
使用步骤：
-
引入 echarts.js 文件 <script src="js/echarts.min.js"></script>
-
准备一个呈现图表的盒子 <div id="main" style="width: 600px;height:400px;"></div>
-
初始化 echarts 实例对象 var myChart =echarts.init(document.getElementById('main'))
-
准备配置项 var option = {
??xAxis: { // x轴
????type: 'category',//类名
????data: ['小明', '小红', '小王']
?},
??yAxis: {// y轴
????type: 'value'//数组
?},
??series: [
???{
??????name: '语文',
??????type: 'bar',//图标类型
??????data: [70, 92, 87],
???}
?]
}
-
将配置项设置给 echarts 实例对象 myChart.setOption(option)
除了配置项会发生改变之外,其他的代码 都是固定不变的
ECharts常用的图表
-
柱状图bar（柱状图描述的是分类数据，呈现的是每一个分类中有多少） -
折线图 line （分析数据随时间的变化趋势） -
散点图 scatter （分析不同维度数据之间的相关性） -
饼图 pie （分析不同分类的数据的占比情况） -
地图 map （分析不同地理位置上数据的差异） -
雷达图 radar（分析多个维度的数据与标准数据的对比情况） -
仪表盘图 gauge（展现某个指标的进度或实际情况 ）
配置项小结
通用配置：
-
title 标题
-
textStyle borderWidth borderColor borderRadius 文字样式 边框宽度 边框颜色 边框圆角
left top right bottom 左边 顶部 右边 底部
-
tooltip 提示内容
-
trigger triggerOn formatter 触发类型 触发时机 内容自定义
-
toolbox.feature
-
saveAsImage dataView restore dataZoom magicType 保存图片 数据视图 重置 缩放 图表转换
-
legend 图例数据
-
data 图例数据, 需要和series数组中某组数据的name值一致
直角坐标系配置：
（bar，line，scatee）
-
grid
| show | borderWidth | borderColor | left | top | right |
|---|
| 是否可见 | 边框宽度 | 边框颜色 | 左边 | 顶部 | 右边 |
还有宽高和底部等
-
axis
-
dataZoom
| type | xAxisIndex | yAxisIndex | start | end |
|---|
| 缩放块类型 | x轴索引 | y轴索引 | 开始 | 结束 |
具体详情配置可参照官方手册
高级配置
显示相关
动画
ECharts 已经内置好了加载数据的动画, 我们只需要在合适的时机显示或者隐藏即可
加载动画
增量动画
所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组 数据之间的差异然后通过合适的动画去表现数据的变化
动画的配置
-
开启动画 animation: true -
动画时长 animationDuration: 5000 -
缓动动画 animationEasing : 'bounceOut'
linear ,线性变化, 这样动画效果会很均匀 bounceOut ,这样动画效果会有一个回弹效果
-
动画阈值 animationThreshold: 8 单种形式的元素数量大于这个阈值时会关闭动画
交互API
全局echarts对象
全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
-
echarts.init（初始化ECharts实例对象 使用主题） -
echarts.registerTheme (注册主题 只有注册过的主题,才能在init方法中使用该主题) -
echarts.registerMap 注册地图数据
$.get('json/map/china.json', function (chinaJson) {
??????echarts.registerMap('china', chinaJson);
});
geo组件使用地图数据
var option = {
??geo: {
?????type: 'map',
?????map: 'china',
?},
})
-
echarts.connect
-
一个页面中可以有多个独立的图表 -
每一个图表对应一个 ECharts 实例对象 -
connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组 <!DOCTYPE html>
<html lang="en">
<head>
??<script src="js/echarts.min.js"></script>
??<script src="js/jquery.min.js"></script>
</head>
<body>
??<div style="width: 600px;height:400px;border:1px solid red"></div>
??<div style="width: 600px;height:400px;border:1px solid green" id="div1">
</div>
<script>
??var mCharts = echarts.init(document.querySelector("div"), 'itcast')
??var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
??var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
??var option = {
????xAxis: {
??????type: 'category',
??????data: xDataArr
???},
????toolbox: {
??????feature: {
????????saveAsImage: {}
?????}
???},
????yAxis: {
??????type: 'value'
??????},
????series: [
?????{
????????type: 'bar',
????????data: yDataArr
?????}
???]
?};
??mCharts.setOption(option)
??$.get('json/map/china.json', function (chinaJson) {
????echarts.registerMap('china', chinaJson)
????var mCharts2 = echarts.init(document.querySelector('#div1'));
????var option2 = {
??????geo: {
????????type: 'map',
????????map: 'china'
?????}
???}
????mCharts2.setOption(option2)
????echarts.connect([mCharts, mCharts2])
?})
</script>
</body>
</html>
这样, 由于我们打开了toolbox中的saveAsImage, 所以会出现下载图片的按钮. 而通过 echarts.connect([mCharts, mCharts2]) , 此时点击下载图片按钮, 保存下来的图片就是两个图 表的图片了.
echartsInstance对象
eChartsInstance 对象是通过 echarts.init 方法调用之后得到的
-
echartsInstance.setOption (设置或修改图表实例的配置项以及数据 多次调用setOption方法 合并新的配置和旧的配置 增量动画) -
echartsInstance.resize 重新计算和绘制图表
一般和window对象的resize事件结合使用
window.onresize = function(){
??myChart.resize();
} -
echartsInstance.on echartsInstance.off(绑定或者解绑事件处理函数)
-
鼠标事件 常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等
事件参数 arg: ?和事件相关的数据信息
mCharts.on('click', function (arg) {
??// console.log(arg)
??console.log('饼图被点击了')
})
解绑事件:
mCharts.off('click')
-
ECharts 事件 常见事件:
legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'
等
事件参数 arg: ?和事件相关的数据信息
mCharts.on('legendselectchanged', function (arg) {
??console.log(arg)
??console.log('图例选择发生了改变...')
})
-
echartsInstance.dispatchAction (主动触发某些行为, 使用代码模拟用户的行为) // 触发高亮的行为
mCharts.dispatchAction({
??type: "highlight",
??seriesIndex: 0,
??dataIndex: 1
})
// 触发显示提示框的行为
mCharts.dispatchAction({
??type: "showTip",
??seriesIndex: 0,
??dataIndex: 3
})
-
echartsInstance.clear (清空当前实例，会移除实例中所有的组件和表清空之后可以再次 setOption) -
echartsInstance.dispose(销毁实例销毁后实例无法再被使用)
|