echarts采坑总结

1.柱形图x轴的名称很长，挤得有些字不显示了

image.png

写上这些就可以了

2.柱形图最大值设置

image.png

3.y轴加%

image.png

 yAxisLableFormatter={
                  (value) => {
                    return `${value}%`;
                  }
                }

4.图例没有加载出来

需要引入图例才能出来
import 'echarts/lib/component/legend';

legend的样式设置

https://blog.csdn.net/xxtnt/article/details/96114386

5.面积图如何变得平滑

image.png

折线图也是这个

6.在涂上显示一块区域

image.png image.png

记得写全，否则不出来

7.网格线设置为虚线

image.png

8.去掉折线上的小圆点

image.png

设置这个属性为'none'就可以了

9.解决饼图文字过长重叠

image.png

10.饼图中间如何加文字
就在title里面写就可以了

image.png

12.柱形图如何多个颜色

series: [{
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                 itemStyle: {
                    normal:{  
                    color: function (params){
                        var colorList = ['#ff4844','#9ac3e5','#66ac52','#ffc032','#549bd3','#f47e39'];
                        return colorList[params.dataIndex];
                    }
                },
              },
        }]

13.如何删除矩形图下面的提示

image.png image.png

加入这个就可以了

14.echarts高度没有占满

只需在echarts配置项加上grid

grid: {
        left: '3%',
        right: '4%',
        top: '5%',
        bottom: '8%',
        containLabel: true,
      },

15.echarts左右距离调整

我们一般使用grid来进行调整

grid: [{
       left: '10%',
       bottom: '10%',
       top: '10%',
       right: '10%'
   }],

饼图调整方式

radius : [ '30%', '50%' ],//内外圆的大小
center : [ '45%', '60%' ],//距离左右，上下距离的百分比

map地图调整方式

layoutCenter: ['48%', '50%'],//距离左右，上下距离的百分比
layoutSize:'145%',//map百分比大小

16.热力图间隔
首先上一个热力图属性大全
https://www.cnblogs.com/wangweizhang/p/7514465.html

在series里面设置itemStyle
itemStyle: {
          borderWidth:5,
          borderType : 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
          borderColor : 'rgba(255,255,255)',
          opacity : 1,
        },

只设置borderWidth是没有用的，要设置borderType和borderColor才行

17.如何动态改变高度

https://www.cnblogs.com/ss977/p/10007891.html

18.如何设置x轴的间隔

https://juejin.im/post/5a9aa3c9f265da239235cd1e