![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts使用心得
echarts使用心得
lamCCH
自学成才
展开
-
echarts横向柱状图TOP排名
需求和上一篇文章类似,只不过多了滚动条和标签颜色。标签右对齐请参考上篇文章。原创 2022-08-23 14:07:28 · 3474 阅读 · 1 评论 -
echarts横向柱状图标签靠右对齐显示
上图中其实每条柱子只有一条数据,我们现在把它当作两条数据来看,左边一条,右边一条,然后把两条数据重叠在一起,就可以渲染出一条数据的视觉。两条柱条的数据是一样的,只不过左边的柱条不显示label,只让右边的显示。柱状图有背景色并且标签右对齐。本来以为echarts自带这些属性,查看了之后并没有找到直接能右对齐的属性,只有添加背景色的属性:`showBackground`,且这个属性是大于等于4.7版本的可以。比较重要的步骤是第一条数据的`zlevel`设为2,第二条数据的`barGap`设为`-100`原创 2022-08-23 11:55:46 · 9407 阅读 · 3 评论 -
Echarts双Y轴,右侧Y轴标签不显示
echarts中有个控制y轴的属性叫yAxis,这个属性可以是对象也可以是数组。当我们只设置一个Y轴时,它为对象;当我们要设置多个Y轴时,它是个数组。双Y轴时,右侧的Y轴标签不显示。原创 2022-08-17 17:13:07 · 9675 阅读 · 2 评论 -
Echarts中rich属性的使用和调整label显示位置
在echarts中rich主要是用于设置用户自定样式,我们可以在title,legend,tooltip等中使用rich,比如下面这个需求就可以用rich属性来实现。原创 2022-06-30 10:55:22 · 12020 阅读 · 0 评论 -
echarts多个不同系列的图例分开显示
如图:图中有两个饼图,对应不同的图例。现在图例混到了一起,显然不方便观察。现在想让两类图例分开显示,以给客户更好的体验。当只有一个系列的图例时,legend是一个对象:legend: { type:'plain',// 图例的类型,plain:普通图例,scroll:可翻页。图例较多时使用。缺省就是'plain' orient:'horizontal', // 图例列表的布局朝向, horizontal:水平 vertical:垂直。缺省就是'horizontal' data:['省公司'.原创 2021-04-28 14:17:35 · 6628 阅读 · 3 评论 -
在echaerts饼图(环形图)内部自定义文字
需求是利用echarts的饼图之环形图在内部自定义文字。如下图: const option = { title: [ { // 第一个圆环标题 text: '省市公司', // 主标题 textStyle: { // 主标题样式 color: '#333', fontWeight: 'bold', fontSize: 14原创 2021-04-13 23:14:40 · 13446 阅读 · 0 评论 -
echarts渲染空数据的处理
echarts在渲染进,如果后台返回的数据为空,页面会一片空白,这样对用户很不友好。我们可以稍微处理一下。在option里配置title属性:var option = { title: { // 无数据时占位用 show: companies.length === 0, // 判断有没有数据,没有则show为true textStyle: { color: '#ccc', fontSize: 18 },原创 2021-04-08 14:09:55 · 5342 阅读 · 0 评论