echarts常用方法（一）

　　目前，项目中涉及到图表的，使用echarts的频率较多，因为UI设计一般不会考虑到是否能实现的问题，他们专注的只是显示的效果。所以作为前端开发，要对echarts进行不同程度的改造，组合，甚至重写等。接下来会根据我目前的接触到的问题，进行一个循序渐进的总结。因为echart版本的升级等问题，虽说会兼容低版本，但是部分写法依旧在新版本的效果与老版本有区别。以下方法大家只作为参考，版本的不兼容导致写法不同的话，只能靠大家发现。

1.x轴文本换行、调整旋转角度、文本不同颜色

axisLabel: {                     interval: '0',rotate: 45,textStyle: {fontSize: 10,color:"#666666"color:function (xdata) {                                return xdata.indexOf('时')<=-1 ? '#E87731' : '#F2F2F2';}},formatter: function (value, index) {var arr = value.split(' ');return arr[0]+'\n'+arr[1];}}

2.柱状图渐变+不同色

if(params.dataIndex > 6){return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset:0,color:colorList[1][0]},{offset:1,color:colorList[1][1]}])
}else{return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset:0,color:colorList[0][0]},{offset:1,color:colorList[0][1]}])                                    }

3.对没有y轴线,只显示label标签的样式

 yAxis: [{type: 'category',axisTick : {show: false},axisLine: {lineStyle:{                                color:'#527877',opacity:0}},axisLabel: {                            color:'#527877'},data: ['榆林市','安康市','宝鸡市','商洛市','铜川市','咸阳市','西安市']},
]

opacity:0

4.后台报错

如果报错为，该节点已经创建过dom，则需要先销毁再加载chart
echarts.dispose(chartView);
chartView是chart容器的ID

转载于:https://www.cnblogs.com/lmxHome/p/10755310.html

echarts常用方法（一）相关推荐

echarts常用方法，legend状态支持两张图片切换（四）
在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件let lgdt = ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
技术图文：如何利用C# + Echarts 绘制 Bar Simple？
背景 Echarts 是百度推出的一个使用 JavaScript 实现的开源可视化库. 该库提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图, ...
考考基础部分，谈谈Java集合中HashSet的原理及常用方法
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者:工匠初心 cnblogs.com/LiaHon/p/1125 ...
echarts geo地图示例_用Python，炫酷地图轻松绘制，一起来学习吧
转自:数据分析1480 地图可视化是一种非常直观的数据分析结果展现形式,python 有很多可视化库可以实现,pyecharts 就是很多 python 爱好者喜爱的实现地图可视化方法之一.不可否认, ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts.map！
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一.不可否认,pyecharts绘制的地 ...
Echarts：简单词云图实现
Echarts是一个开源的可视化图表库,支持丰富的图表,官网中还有大量示例可以选择使用.参考. 其中比较好玩.有趣的是词云,词云就是用关键词组成的一朵云,更广泛的定义是,由关键词组成的任意一种图案均称 ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts！
点击上方"数据管道",选择"置顶星标"公众号干货福利,第一时间送达导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现, ...

echarts常用方法（一）

echarts常用方法（一）相关推荐

最新文章

热门文章