关于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.先百度到需要定位到地方的经纬度
- 2.找到该json文件
- 3.修改json地图上显示名称的位置坐标的"cp"参数，没有就添加:
eg:{"type":"Feature","properties":{"cp":[117.97,28.45],"name":"上饶市"}
然后省市区县名字自然就到坐标位置去了。
4.ios和安卓适配问题
比如：oppo手机，图例顶部一小部分被超出隐藏：
思路：
准备一个isUa变量，用于判断是否是ios还是安卓环境，
然后设置：
legend的 padding: isUa.ios()?0:5,
