如何设置echarts纵轴格式化百分比
发布网友
发布时间：2022-04-21 21:12
共1个回答
热心网友
时间：2022-04-22 15:31
1. EChart最新的文档目录。
首先创建一个解决方案，目录如下：
之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：
l Echarts-map.js :主要用来渲染跟地图相关
l Echarts.js :基本的常规图形相关
l Esl.js :图像引擎
Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
2. 抽象之后的Echarts。
根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Var ECharts={
ChartConfig:function(container,option){ …..},//加载Echarts配置文件
ChartDataFormate:{….},//数据格式化
ChartOptionTemplates:{….},//初始化常用的图表类型
Charts:{ RenderChart:function(option){….},//渲染图表
RenderMap:function(option){…}//渲染地图
}
}；
2.1 Echarts配置文件的引入
在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径
var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径
require.config({//引入常用的图表类型的配置
paths: {
echarts: chart_path,
'echarts/chart/bar': chart_path,
'echarts/chart/pie': chart_path,
'echarts/chart/line': chart_path,
'echarts/chart/k': chart_path,
'echarts/chart/scatter': chart_path,
'echarts/chart/radar': chart_path,
'echarts/chart/chord': chart_path,
'echarts/chart/force': chart_path,
'echarts/chart/map': map_path
}
});
this.option = { chart: {}, option: option, container: container };
return this.option;
}
2.2 数据格式化
为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:
Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
具体的代码实现如下：
+ View Code
1
2.3 各种图表类型的配置初始化
在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：
+ View Code
