项目场景：

使用第三方插件建立一个无限级目录的折线树图。

一、ECharts是什么？

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

二、为什么使用ECharts？

ECharts的优点：

（1）丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

（2）多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

（3）千万数据的前端展现

通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移等交互。

以上是 ECharts优点的一部分，若想具体了解，可到官方手册的特性介绍查看，网址：特性 - Apache ECharts

二、使用步骤

1.获取 Apache ECharts

从 npm 获取：
npm install echarts --save
从 GitHub 获取：

apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

2.引入 ECharts 文件

代码如下（示例）：

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

3.设置一个容器

代码如下（示例）：

<style>#frame{width: 79.8%;height: 750px;border: 1px solid #E1E1E1;float: left;border-left: 0;/*体系图的背景图修改为相应路径*/background-image: url("./plugins/echarts/img/1.png");background-repeat: no-repeat;background-size:100% 100%;}#container{float: left;border-left: 0;overflow:auto;width: 100%;height: 700px ;}
</style>
<div id="frame"><!--layui框架的固定块--><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend style="margin-left: -44%">文件体系图</legend></fieldset><!--ECharts的容器--><div id="container"></div>
</div>

4.核心配置

代码如下（示例）：

<script type="text/javascript">//官方数据请求路径const ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';//获取存储divconst chartDom = document.getElementById('container');const myChart = echarts.init(chartDom);let option;//显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id'));myChart.showLoading();//官方数据请求路径//$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {$.getJSON("{url:/document_revision/echarts_ajax}",{status:1}, function (data) {//得到数据后隐藏Loading标志myChart.hideLoading();echarts.util.each(data.children, function (datum, index) {//间隔展开子数据，animate，display，physics，scale，vis是展开的index % 1 ===1  && (datum.collapsed = true);//只展开第一层//datum.collapsed = true;});myChart.setOption(option = {//提示框组件tooltip: {//触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。trigger: 'item',//提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：triggerOn: 'mousemove'},//系列列表series: [{//树形结构type: 'tree',//开启鼠标缩放和平移漫游roam:true,//id: 0,//上面从flare.json中得到的数据data: [data],//距离上top: '1%',//左left: '7%',//下bottom: '1%',//右的距离right: '20%',//直线树状图(存在缺陷,官网示例也是如此)//控制是否为折线edgeShape: 'polyline',//径向树状图//layout: 'radial',symbol: 'emptyCircle',//从上到下//orient: 'vertical',edgeForkPosition: '90%',itemStyle:{//颜色//color:'red',//圆点的线条类型 solid 实线 dashed 虚线 dotted 虚线(频度偏小)borderType:'solid',},lineStyle: {//线条粗细width: 2},//标记的大小，就是那个小圆圈，默认7symbolSize: 11,//每个节点所对应的标签的样式label: {shadowColor:'transparent',borderType:'dashed',normal: {//标签的位置position: 'left',//文字垂直对齐方式，默认自动。可选：top，middle，bottomverticalAlign: 'middle',//文字水平对齐方式，默认自动。可选：top，center，bottomalign: 'right',//标签文字大小fontSize: 13}},//叶子节点的特殊配置，如上面的树图示例中，叶子节点和非叶子节点的标签位置不同leaves: {label: {normal: {position: 'right',verticalAlign: 'middle',align: 'left'}}},//子树折叠和展开的交互，默认打开expandAndCollapse: true,//树图初始展开的层级（深度）initialTreeDepth : 2,//初始动画的时长，支持回调函数,默认1000animationDuration: 1550,//数据更新动画的时长，默认300animationDurationUpdate: 750}]});});//渲染数据option && myChart.setOption(option);
</script>

效果图

意外问题描述：

在使用折线树图时，发现收缩展开几次后，会出现乱版现象，到官网查看示例，亦是如此，如下图：

网址：Examples - Apache ECharts

解决方案：乱版是最新的几个版本才出现的（官网案例出错版本号：5.2.1,5.2.0两个版本），在以前的版本并没有乱版问题，下载的除这两个之外的版本即可。

ECharts折线树图的使用相关推荐

d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
Echarts折线图的平移假动画
Echarts折线图的平移假动画 #可视化项目中经常用图表的方式来展示数据,折线图是经常出现的,但是在echarts折线图中正常情况是通过删除数据的第一个,添加一个新数据在数组的末尾来实现动画,此动画 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

ECharts折线树图的使用

项目场景：

一、ECharts是什么？

二、为什么使用ECharts？

（1）丰富的可视化类型

（2）多种数据格式无需转换直接使用

（3）千万数据的前端展现

二、使用步骤

1.获取 Apache ECharts

从 npm 获取：

从 GitHub 获取：

2.引入 ECharts 文件

3.设置一个容器

4.核心配置

效果图

意外问题描述：

ECharts折线树图的使用相关推荐

最新文章

热门文章