echarts学习笔记

问：如何修改雷达图的字体大小？

答：

image.png

问：原代码：
myChart.on("click", (params) => {
请求
});
发现上面代码，请求了两次，怎么解决？
答：在点击事件之前加一个off事件
myChart.off('click');
myChart.on("click", (params) => {
请求
});

image.png

问：echarts 柱状图 x轴 部分刻度文字不显示，怎么办？
答：xAxis.axisLabelinterval : 0，原文链接：https://blog.csdn.net/qq_34531925/article/details/78257080

image.png

遇到一个需求：删除一条折线图和对应的图例，但是鼠标点击x轴，显示对应数据，我现在是做成鼠标移入以后显示对应数据，代码如下：

            trigger: 'axis',
            formatter : (param) => {
              return `
                ${param[0].axisValue}

                ${param[0].seriesName}：${param[0].value}

                ${param[1].seriesName}：${param[1].value}

                人数：${this.people[param[0].dataIndex]}

              `
            }
          },


![image.png](https://upload-images.jianshu.io/upload_images/15777833-b02f8e8df40ae01f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：如何让折线图和柱状图并存
答：
```{
              name: '已谈',
              type: 'bar',  //这个是柱状图
              data:this.talkedDate,
},
            {
              name: '应谈',
              type: 'line', //这个是折线图
              data : this.shouldTalkDate,
}


今天用echarts时，发现有一个参数，在echarts官网里生效，结果我的项目没有生效，最后发现，原来是应该写div标签的，结果我用了canvas标签，这种低级错误，更难发现


![image.png](https://upload-images.jianshu.io/upload_images/15777833-1aedd03292107552.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：折线图的横纵坐标的交叉线，怎么设置透明度？
答：[https://echarts.apache.org/zh/option.html#radar.splitLine.lineStyle.opacity](https://echarts.apache.org/zh/option.html#radar.splitLine.lineStyle.opacity)


ECharts雷达图详细配置说明：[https://www.cnblogs.com/freely/p/11936659.html](https://www.cnblogs.com/freely/p/11936659.html)


![image.png](https://upload-images.jianshu.io/upload_images/15777833-da753993d4b445de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：里面需要透明色，怎么实现？
答：
```radar: {
            splitArea: {
              show: true,
              areaStyle: {
                color: ['transparent', 'transparent'],
              }
            },


![image.png](https://upload-images.jianshu.io/upload_images/15777833-e16c6c93d0d91cf3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：上面雷达图的五边形里面有颜色，并且透明，怎么弄？
答：
```series: [{
            data: [
              {
                areaStyle: {
                  opacity: 0.5
                },


![image.png](https://upload-images.jianshu.io/upload_images/15777833-815697ccfec4512a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：如何让刻度尺从最左侧开始？
答：xAxis: {
          boundaryGap: false,
        },


![image.png](https://upload-images.jianshu.io/upload_images/15777833-7415f393fe20e956.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：上面柱状图用了虚线，怎么实现？
答：yAxis: {
            splitLine : {
              lineStyle : {
                type : 'dashed'
              }
            },


按照自己的想法写纵轴刻度尺：（原文链接：[https://echarts.apache.org/zh/option.html#yAxis.min](https://echarts.apache.org/zh/option.html#yAxis.min)）
![image.png](https://upload-images.jianshu.io/upload_images/15777833-e0268f6ebeb535b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![image.png](https://upload-images.jianshu.io/upload_images/15777833-e518565e7df4d237.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问：鼠标移到柱子上去时，需要显示该项的文本和数值大小，怎么做？
答：
option下加上：
```tooltip : {
    trigger: 'axis',
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
},
一开始以为我自己要写类似的话:'name
solid value'，其实不需要写这些东西，只需要写上面这段话就行了