关于Echarts的一些事儿

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表,大家在平时项目里面肯定会经常用到。

下面来说说echarts在项目里面的坑吧（-^-）

1.统计图echarts里面 x轴数据不完全展示问题（x轴标签文字过多导致显示不全）

设置 X轴

1 XAxis:{
2          data: ..., //数据
3            axisLabel: { //坐标轴刻度标签的相关设置
4               interval: 0, //坐标轴刻度标签的显示间隔 设置为0强制显示所有标签
5               rotate: 0 //可以设置倾斜角度 }
}

x轴数据溢出的问题---> boundaryGap : true,  设为true

文字竖直显示: 使用axisLabel属性

1 axisLabel: {
2             interval: 0,
3             formatter:function(value){
4              return value.split("").join("\n");}
5}

2.echarts柱状图数据太多展示问题------ dataZoom属性

 

 1 // type的slider和inside可以同时保留，既可以保留滚动条，也可以在内部拖动
 2 dataZoom : [
 3         //1.横向使用滚动条
 4           {
 5             type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
 6             show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
 7             start: 0,//数据窗口范围的起始百分比0-100
 8             end: 50,//数据窗口范围的结束百分比0-100
 9             xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
10             bottom:-10 //距离底部的距离
11           },
12        //2.在内部可以横向拖动
13          {
14              type: 'inside',// 内置于坐标系中
15              start: 0,
16              end: 30,
17              xAxisIndex: [0]
18           },
19        //3.纵向使用滚动条
20         {
21             type: 'slider',
22             show: true,
23             yAxisIndex: [0],//设置组件控制的y轴
24             left: '93%',//距离左侧的距离 可以使百分比，也可以是像素 left: '30'（30像素）
25             start: 29,
26             end: 36
27         },
28       //4.在内部可以纵向拖动
29         {
30             type: 'inside',
31             yAxisIndex: [0],
32             start: 29,
33             end: 36
34           }
35         ]

3.echarts地图省市区县名称显示位置调整

        1. 1.先百度到需要定位到地方的经纬度

1. 2.找到该json文件

1. 3.修改json地图上显示名称的位置坐标的"cp"参数，没有就添加:

eg:{"type":"Feature","properties":{"cp":[117.97,28.45],"name":"上饶市"}

然后省市区县名字自然就到坐标位置去了。

4.ios和安卓适配问题

比如：oppo手机，图例顶部一小部分被超出隐藏：

思路：

准备一个isUa变量，用于判断是否是ios还是安卓环境，

然后设置：

legend的 padding: isUa.ios()?0:5,