您的位置：首页 > 其它

echarts使用心得总结

2018-01-16 21:28 381 查看
1.简单介绍

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

ECharts由百度出品，简单好用易上手，属性丰富，函数可自定义，图形好看。

公司新项目需要在系统首页展示系统的运行概况，要求使用图形展示，于是开始接触研究使用ECharts.

2.使用情况

（1）引入js文件

<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>


(2)在绘图前我们需要为
ECharts 准备一个具备高宽的
DOM 容器。

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>

(3)通过 echarts.init 方法初始化一个
echarts 实例.

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));


（4）根据需要设置图形属性，如柱状图/折线图/是否多个XY轴/数据是否支持可过滤，以下是官方实例。

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

（5）展示配置好的图形。

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

3.高级功能扩展

虽然从1,2点来看，很容易就可以使用echarts了，但是echarts的强大之处远远不止这点，并且产品经理的需求也绝对不会这么简单。

以下需求是我在项目中碰见的，记录下。

需求一：使用折线图展示系统的运行状况，横轴为时间，左y轴为系统接入总数，右y轴为系统命中总数。时间轴需支持滑动，数据随着时间作相应变化。

对应图形：



需求二：展示系统的任务数，并且以不同颜色标识已完成的任务和处理中的任务。

对应图形：



需求三：柱状图展示系统所有案件数，X轴一表示案件名，X轴二表示案件创建时间（可支持时间轴前后滑动并要过滤对应案件，默认展示十个案件），Y轴表示案件命中总数。柱状支持点击事件，点击柱子可弹出模态框，同时模态框中展示该案件下所有的线索命中趋势。

对应图形：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航