Echarts

一个基于 JavaScript 的开源可视化图表库。

安装方式

js
1
2
3
4
5
npm init -y   //初始化项目 
npm install echarts --save  //下载echarts
//ps:原生是不能用npm的;npm导入的得是带有打包工具的,比如webpack;
//原生可以在官网-->入门篇-->获取Echarts-->从 CDN 获取-->最上面的/dist/echarts.min.js-->打开之后右键-->另存为
<script src="./echarts.min.js"></script>

快速上手

参考 echarts 官网上的快速上手

  1. 引入 js 文件
  2. 创建一个 div 来做 dom 容器；容器必须设置宽高，不然不会出来；
  3. 逻辑处理
html
1
<div id="box" style="width:500px;height:500px"></div>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script src="./echarts.min.js"></script>
<script>
    // 1.初始化echarts实例
    var myChart = echarts.init(document.getElementById('box'));
    // var myChart = echarts.init(document.getElementById('box'),"dark");  暗黑主题
    // 2.设置绘图的配置项和数据
    var userName=["李白","阿离","孙尚香","虞姬","马可"];
    var userScore = [100,120,99,89,55,97];

    var options ={
        //配置标题
        title:{
            text:"学员成绩表鸭"
        },
        //配置x轴
        xAxis:{
            type:"category", //category(类目名称),value(数值)
            data:userName   
        },
        // 配置y轴
        yAxis:{
            type:"value",
        },
        // 配置系列列表(这个是数组对象)
        series:[{
            type:"bar",
            data:userScore
        }]
    }

    // 3.绘制图形
    myChart.setOption(options);
</script>

series 配置系列列表

echarts官网-->文档-->配置项手册；其实大部分的图只是 series 差别比较大，别的几乎一样；

  • 是一个数组对象 每一个对象 {} 里面就是一系列数据，都有着自己的 data，type…
  • label 设置提示文本
  • itemStyle 设置柱子的风格
  • markPoint 与 markLine 设置最大值，最小值与平均值
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//快速上手中,仅修改series配置列表,配置如下:
// 配置系列列表(这个是数组对象)
series:[{
    type:"bar",
    data:userScore,
    //y轴的提示文本
    label:{
        show:true,  //y轴的数据会展示在每个轴的中心位置(默认位置)
        position:"top",  //y轴数据展示在顶部
        rotate:40, //y轴数据 逆时针旋转40度, -40 就是顺时针旋转
    },
    barWidth:20, //设置柱状的宽度
    itemStyle:{ 
        borderRadius:[20,20,0,0],//borderRadius (顺时针左上，右上，右下，左下)
        // color:'green'  //一种颜色
        color: new echarts.graphic.LinearGradient(0,0,0,1,[  //渐变色
            {
                offset:0,
                color:'red'
            },
            {
                offset:1,
                color:'orange'
            }
        ])
    },
    markPoint:{  //设置标记点 max min
        data:[
            {type:'max',name:'最大值'},
            {type:'min',name:'最小值'}
        ]
    },
    markLine:{  //设置标记线  average
        data:[
            {type:'average',name:'平均值'}
        ]
    }
}]

grid 配置网络坐标系

用来调整坐标系的位置。

Tip：top、bottom、left、right 在哪个里面都可以用的，用来调整位置；

js
1
2
3
4
5
6
7
// 配置网络坐标系
grid:{
    show:true,  //展示
       top:"30%",  //grid 组件离容器上侧的距离
       left:"30%", //grid 组件离容器左侧的距离
       containLabel :true, //grid 区域是否包含坐标轴的刻度标签
},

tooltip 配置提示语

js
1
2
3
4
5
6
7
8
// 配置提示语
tooltip:{
   show:true,
   trigger:'axis',  //触发提示类型 item (默认) axis (中间有条细线)
   axisPointer:{ // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果
   type:"shadow"
      }
},

toolbox 工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

js
1
2
3
4
5
6
7
8
9
10
11
12
13
// 工具箱
toolbox: {
    show: true,
    feature: { //各工具配置项
    saveAsImage: {}, //保存图片
    restore: {}, //配置项还原
    dataView: {}, //编辑后可以动态更新
    dataZoom: {}, //数据区域缩放
    magicType: {  //多种类型切换
    type: ['line', 'bar']
    },
    }
},

legend 图例组件

图例组件展现了不同系列的标记 (symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 配置系列列表(这个是数组对象)
series: [
    {
    name:"成绩", //必须有
    type: "bar",
    data: userScore,
    },
    {
    name:"身高",  //必须有
    type:"bar",
    data:userHeight
    }
]

// 图例组件
legend:{
    show:true,
    icon:"circle"
}

大致效果图如下图所示：

效果图

以上内容都可以在 echarts官网-->文档-->配置项手册中找到；

Echarts 事件

以下内容都可以在 echarts官网-->文档-->API 中找到；

  • 监听用户的全部事件
js
1
2
3
4
5
// 4.监听用户的点击事件
//全部监听
myChart.on("click",(msg)=>{
    console.log(msg);
})
  • 监听用户的部分事件
js
1
2
3
4
// 筛选 {seriesName:"成绩"}的触发点击事件
myChart.on("click",{seriesName:"成绩"},(msg)=>{
    console.log(msg)
})
  • 移除监听事件
js
1
2
// 4.2 移除监听事件
myChart.off("click");
  • 添加加载中提示
js
1
2
3
// 1.初始化echarts实例
var myChart = echarts.init(document.getElementById('box'), 'dark');
myChart.showLoading();  //在初始化实例下添加 showLoading  API
js
1
2
3
4
5
// 2.绘制图形
setTimeout(()=>{
    myChart.setOption(options);
    myChart.hideLoading();
},1500); //设置定时器,让图形1500ms后加载,并隐藏加载提示
  • Echarts 随窗口大小改变 (若 box 固定宽高，则是改变不了的)
js
1
2
3
4
// 5.改变大小
window.addEventListener("resize",()=>{
  myChart.resize();
})

以上内容全部代码

  • css
css
1
2
3
4
5
6
7
8
9
* {
    padding: 0;
    margin: 0;
}

#box {
    width: 100vw;
    height: 100vh;
}
  • html
html
1
<div id="box"></div>
  • js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<script src="./echarts.min.js"></script>
<script>
    // 1.初始化echarts实例
    var myChart = echarts.init(document.getElementById('box'), 'dark');
    myChart.showLoading();
    // var myChart = echarts.init(document.getElementById('box'),"dark");  暗黑主题
    // 2.设置绘图的配置项和数据
    var userName = ["李白", "阿离", "孙尚香", "虞姬", "马可"];
    var userScore = [100, 120, 99, 89, 55, 97];
    var userHeight = [176, 163, 166, 178, 176, 187];

    var options = {
        //配置标题
        title: {
            text: "学员成绩表鸭",
            top: "3%",
            left: "3%"
        },
        //配置x轴
        xAxis: {
            name: "姓名",
            type: "category", //category(类目名称),value(数值)
            data: userName
        },
        // 配置y轴
        yAxis: {
            name: "分数",
            type: "value",
        },
        // 图例组件
        legend: {
            show: true,
            icon: "circle",
            top: "3%",
        },
        // 工具箱
        toolbox: {
            show: true,
            feature: { //各工具配置项
                saveAsImage: {}, //保存图片
                restore: {}, //配置项还原
                dataView: {}, //编辑后可以动态更新
                dataZoom: {}, //数据区域缩放
                magicType: { //多种类型切换
                    type: ['line', 'bar']
                },
            },
            top: "3%",
            right: "3%"
        },
        // 配置提示语
        tooltip: {
            show: true,
            trigger: 'axis', //触发提示类型 item (默认) axis (中间有条细线)
            axisPointer: { // 触发动画效果(阴影,xy轴交叉坐标)
                type: "shadow"
            }
        },
        // 配置网络坐标系(用来调整坐标系的位置的)
        grid: {
            show: true, //展示
            top: "10%", //grid 组件离容器上侧的距离
            left: "10%", //grid 组件离容器左侧的距离
            containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        // 配置系列列表(这个是数组对象)
        series: [{
                name: "成绩",
                type: "bar",
                data: userScore,
                //y轴的提示文本
                label: {
                    show: true, //y轴的数据会展示在每个轴的中心位置(默认位置)
                    position: "top", //y轴数据展示在顶部
                    rotate: 40, //y轴数据 逆时针旋转40度, -40 就是顺时针旋转
                },
                // barWidth: 20, //设置柱状的宽度
                itemStyle: {
                    borderRadius: [20, 20, 0, 0], //(顺时针左上，右上，右下，左下)
                    // color:'green'
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'red'
                        },
                        {
                            offset: 1,
                            color: 'orange'
                        }
                    ])
                },
                markPoint: { //设置标记点 max min
                    data: [{
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: { //设置标记线  average
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },
            {
                name: "身高",
                type: "bar",
                data: userHeight
            }
        ]
    }

    // 3.绘制图形
    setTimeout(() => {
        myChart.setOption(options);
        myChart.hideLoading();
    }, 500)

    // 4.监听用户的点击事件
    //全部监听
    // myChart.on("click", (msg) => {
    //     console.log(msg);
    // })

    // 筛选 {seriesName:"成绩"}的触发点击事件
    myChart.on("click", {
        seriesName: "成绩"
    }, (msg) => {
        console.log(msg)
    })

    // 4.2 移除监听事件
    myChart.off("click");

    // 5.改变大小
    window.addEventListener("resize", () => {
        myChart.resize();
    })
</script>

散点（气泡）图

身高体重根据 bmi，超重的大一点，为红色；不超重的小一点，为绿色；

  • css
js
1
2
3
4
5
6
7
8
*{
padding: 0;
margin: 0;
}
#box{
    width: 100vw;
    height: 100vh;
}
  • html
html
1
<div id="box"></div>
  • js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script src="./echarts.min.js"></script>
<script>

    // 1.初始化Echarts实例
    var myChart = echarts.init(document.getElementById("box"),'dark');

    // 2.设置绘图的数据和配置项

    // 模拟数据
    var arrs = [{height:172,weight:172},{height:168,weight:152},{height:156,weight:152},{height:166,weight:112}
    ,{height:155,weight:132},{height:148,weight:113},{height:172,weight:162},{height:171,weight:132},{height:173,weight:132}
    ];

    //通过官网的示例可得知为 [[x,y],[x,y],[x,y]] 格式的数据

    var allData = arrs.map((item)=>{
        return [item.height,item.weight]
    });

    var options={
        // 配置标题
        title:{
            text:"身高体重图",
            textStyle:{
                color:"orange",
            },
            top:"5%",
            left:"5%"
        },

        // 配置X轴
        xAxis:{
            name:"身高",
            show:true,
            type:"value",
            scale:true,   //坐标不会强制包含0刻度,只在数值轴中（type: 'value'）有效
        },
        // 配置y轴
        yAxis:{
            name:"体重",
            show:true,
            type:"value",
            scale:true,  //坐标不会强制包含0刻度,只在数值轴中（type: 'value'）有效
        },
        // 配置网格坐标系
        grid:{
            show:false,
            top:"15%",
            left:"10%",
            containLabel:true,
        },
        //配置系列
        series:[
            {
                type: 'effectScatter',
                data:allData,
                showEffectOn:'emphasis',  //配置何时显示特效  emphasis 鼠标移入
                rippleEffect:{  //设置波纹
                    scale:5   //波纹大小
                },
                // 设置标记的大小
                symbolSize:function(info){   //因为有条件来区分,所以使用的函数
                    // console.log(info)
                    // bmi = 体重kg/(身高m*身高m)  大于28,代表肥胖
                    let bmi = info[1]/2/(info[0]/100*info[0]/100);
                    if(bmi>28){
                        return 12;
                    }else{
                        return 8;
                    }
                },
                //设置标记的颜色
                itemStyle:{ 
                    color:function(datas){   //因为有条件来区分,所以使用的函数
                    // console.log(info)
                    let newDatas = datas.value;
                    let bmi = newDatas[1]/2/(newDatas[0]/100*newDatas[0]/100);
                    if(bmi>28){
                        return "red"
                    }else{
                        return "green"
                    }
                    }
                }
                
            }
        ]

    }

    // 3.展示
    myChart.setOption(options);
</script>

大致效果图如下图所示：

图例

在 vue 中使用 Echarts

基本使用

  1. 下载：npm install echarts
  2. 在 main.js 入口文件里引入
js
1
2
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts; //挂载到原型上
  1. 使用
js
1
2
3
this.myChart = this.$echarts.init(
        document.getElementById("xxx")
   );

获取 Echarts 的 base64 地址

通过官网的 getDataURL 来获取绘制图像的地址

注意事项：如果在 mounted 时候就要获取 base64 地址会出现如下情况：

  • 执行 getDataURL 之前，ECharts 的 option 必须设置好，否则图片出现空白 (只有坐标系，没有数据)

把 getDataURL 这个方法理解成为是一个相机，而你的 展示的图表是一个人在摆姿态。也就是 当照相机 按下快门的一瞬间，你这个人 姿态还没有摆好就已经被拍照了 那么自然 洗出来的 图片就没有效果了

期望的：

期望的

通过 base64 地址，在新的 tab 页展现的：

实际上

解决方法

  • 延迟 相机的 拍照时间
js
1
2
3
4
5
6
7
this.myChart.setOption(option);
setTimeout(() => {
    this.echartsBase64 = this.myChart.getDataURL({
        backgroundColor: "#fff",
    });
    console.log(this.echartsBase64);
}, 1000);
  • 取消 图表里面动画效果，就是在 option 中添加一个 animation: false 属性 就可以解决这个问题

我们这次是通过点击按钮获取 base64 地址，所以不会出现此上提及的问题；但是点击的时候需要通过 Echarts 的 getDataURL 来获取地址，所以我将 Echarts 存到了 data 里面

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
  <div>
    <div id="meetingRoomTrend" style="width: 500px; height: 500px"></div>
    <div>
      <button @click="getBase64">获取EchartsBase64</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "exportEcharts",
  data() {
    return {
      myChart: "",
      echartsBase64: "",
    };
  },
  methods: {
    meetingChart() {
      this.myChart = this.$echarts.init(
        document.getElementById("meetingRoomTrend")
      );
      //配置图表
      var option = {
        // animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: false,
        },
        // 工具箱
        toolbox: {
          show: true,
          feature: {
            //各工具配置项
            saveAsImage: { show: true }, //保存图片
            restore: {}, //配置项还原
            dataView: {}, //编辑后可以动态更新
            dataZoom: {}, //数据区域缩放
            magicType: {
              //多种类型切换
              type: ["line", "bar"],
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["会议室01", "会议室02", "会议室03", "会议室04", "会议室05"],
        },
        series: [
          {
            name: "2012",
            type: "bar",
            data: [16, 50, 30, 25, 36],
          },
        ],
      };
      this.myChart.setOption(option);
      // setTimeout(() => {
      //   this.echartsBase64 = this.myChart.getDataURL({
      //     backgroundColor: "#fff",
      //   });
      //   console.log(this.echartsBase64);
      // }, 1000);
    },
    getBase64() {
      this.echartsBase64 = this.myChart.getDataURL({ backgroundColor: "#fff" });
      console.log(this.echartsBase64);
    },
  },
  mounted() {
    this.meetingChart();
  },
};
</script>

<style scoped>
</style>

通过 select 切换 Echarts 图（不改变数据，只切换图形）

我这里用到了两种方法：

  • 通过修改 series 里面的 type，即给 series 里面的 type 为一个变量，通过修改这个变量为 bar，line，pie 等来切换图形；
  • 重新设置 options，echarts 所有的配置项都在 options, 改变这个就相当于改变了 echarts；同上面的方法相比，上面的缺点是切换为饼状图还会有坐标轴，不妥；此方法的缺点是，代码重复的多，好多个 options；

以上方法都有个坑：

控制台会提示：There is a chart instance already initialized on the dom.

虽然不影响切换效果，但是总感觉不好

坑的解决方法：

  • 每次绘制 echart 前，要 dispose () 销毁实例一下，否则图会重叠在一起；

方案一效果：

方案一

方法一代码：

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
  <div>
    <div>
      <el-select v-model="echartsType" @change="changeEcharts">
        <el-option
          v-for="(item, index) in optVal"
          :label="item.lable"
          :value="item.value"
          :key="index"
        ></el-option>
      </el-select>
      <div id="meetingRoomTrend" style="width: 500px; height: 500px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "changeEcharts",
  data() {
    return {
      echartsType: "bar",
      optVal: [
        { lable: "柱状图", value: "bar" },
        { lable: "折线图", value: "line" },
        { lable: "饼状图", value: "pie" },
      ],
      myChart: "",
      userName: ["李白", "阿离", "孙尚香", "虞姬", "马可"],
      userScore: [100, 120, 99, 89, 55, 97],
    };
  },
  methods: {
    // 通过修改series里面的type,然后将原来的echarts dispose()与重新init来实现的;此方法可用于bar和line两种的切换;加上pie,因为series不同(pie没有横坐标啥的),所以不建议此方法;
    getCharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("meetingRoomTrend")
      );
      //   this.myChart.showLoading();
      var options = {
        //配置标题
        title: {
          text: "学员成绩表鸭",
        },

        //配置x轴
        xAxis: {
          type: "category", //category(类目名称),value(数值)
          data: this.userName,
        },
        // 配置提示语
        tooltip: {
          show: true,
          trigger: "axis", //触发提示类型 item (默认) axis (中间有条细线)
          axisPointer: {
            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果
            type: "shadow",
          },
        },
        // 配置y轴
        yAxis: {
          type: "value",
        },
        // 配置系列列表(这个是数组对象)
        series: [
          {
            type: this.echartsType,
            data: this.userScore,
          },
        ],
      };

      this.myChart.setOption(options);
    },
    changeEcharts() {
      /**
       * clear类似于v-show
       * dispose类似于v-if
       */
      if (![null, "", undefined].includes(this.myChart)) {
        // this.myChart.dispose(); //解决echarts dom已经加载的报错
        // this.myChart.clear();
      }
      this.getCharts();
    },
  },
  mounted() {
    this.getCharts();
  },
};
</script>

<style scoped>
</style>

方案二效果：

方案二

方法二代码：

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<template>
  <div>
    <div>
      <el-select v-model="echartsType" @change="changeEcharts">
        <el-option
          v-for="(item, index) in optVal"
          :label="item.lable"
          :value="item.value"
          :key="index"
        ></el-option>
      </el-select>
      <div id="meetingRoomTrend" style="width: 500px; height: 500px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "changeEcharts",
  data() {
    return {
      echartsType: "bar",
      optVal: [
        { lable: "柱状图", value: "bar" },
        { lable: "折线图", value: "line" },
        { lable: "饼状图", value: "pie" },
      ],
      myChart: "",
      optionsBar: "",
      optionsLine: "",
      optionsPie: "",
      userName: ["李白", "阿离", "孙尚香", "虞姬", "马可"],
      userScore: [100, 120, 99, 89, 55, 97],
    };
  },
  methods: {
    // echarts所有的配置项都在options,改变这个就相当于改变了echarts;
    getCharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("meetingRoomTrend")
      );
      this.optionsBar = {
        //配置标题
        title: {
          text: "学员成绩表鸭",
        },

        //配置x轴
        xAxis: {
          type: "category", //category(类目名称),value(数值)
          data: this.userName,
        },
        // 配置提示语
        tooltip: {
          show: true,
          trigger: "axis", //触发提示类型 item (默认) axis (中间有条细线)
          axisPointer: {
            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果
            type: "shadow",
          },
        },
        // 配置y轴
        yAxis: {
          type: "value",
        },
        // 配置系列列表(这个是数组对象)
        series: [
          {
            type: "bar",
            data: this.userScore,
          },
        ],
      };
      this.optionsLine = {
        //配置标题
        title: {
          text: "学员成绩表鸭",
        },

        //配置x轴
        xAxis: {
          type: "category", //category(类目名称),value(数值)
          data: this.userName,
        },
        // 配置提示语
        tooltip: {
          show: true,
          trigger: "axis", //触发提示类型 item (默认) axis (中间有条细线)
          axisPointer: {
            // 触发动画效果(阴影,xy轴交叉坐标)  必须trigger为axis才有动画效果
            type: "shadow",
          },
        },
        // 配置y轴
        yAxis: {
          type: "value",
        },
        // 配置系列列表(这个是数组对象)
        series: [
          {
            type: "line",
            data: this.userScore,
          },
        ],
      };
      this.optionsPie = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          // confine: true,
          // formatter: "{a} <br/>{b} : {c} ({d}%)",
         
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // this.myChart.setOption(options);
    },
    changeEcharts() {
      /**
       * clear类似于v-show
       * dispose类似于v-if
       */
      if (![null, "", undefined].includes(this.myChart)) {
        this.myChart.dispose(); ////解决echarts dom已经加载的报错
        // this.myChart.clear();
      }
      if (this.echartsType == "bar") {
        this.getCharts();
        this.myChart.setOption(this.optionsBar);
      } else if (this.echartsType == "line") {
        this.getCharts();
        this.myChart.setOption(this.optionsLine);
      } else if (this.echartsType == "pie") {
        this.getCharts();
        this.myChart.setOption(this.optionsPie);
      }
    },
  },
  mounted() {
    this.getCharts();
    this.myChart.setOption(this.optionsBar);
  },
};
</script>

<style scoped>
</style>

如何自定义 tooltip formatter

方式有很多，我更趋向回调函数的方式，因为简单明了；

js
1
2
3
4
5
6
7
8
{
    tooltip: {
        formatter:function(params){
            console.log(params);
            return "要展示的"
        }
    }
}

通过上面切换 Echrarts 图的方法二来实验，输出如下：

formatter

  • 拼凑：
js
1
2
3
4
formatter: (params) => {
    // console.log(params);
    return `${params.seriesName}<br/>${params.seriesName}<br/>`
},

formatter

  • 将 tooltip 限制在图表区域内：

当 return 的东西足够多，会超出浏览器的 clientHieght 范围

formatter

js
1
2
3
4
5
//相关代码
formatter: (params) => {
// console.log(params);
return `${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>`;
},

解决方法：

js
1
2
3
tooltip: {
	confine: true,
}

formatter

上面的实例就是

js
1
2
3
4
5
6
7
8
9
tooltip: {
    trigger: "item",
    confine: true,
            // formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter: (params) => {
                // console.log(params);
                return `${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>${params.seriesName}<br/>`;
            },
},
  • 不希望以”</br>” 而是以”\n” 作为换行符
js
1
2
3
tooltip: {
	renderMode: 'richText', // 默认为html
},

参考文献

echarts 下载图片，getDataURL 获取 base64 地址

通过 Js 将 ECharts 导出为图片

关于 echarts 导出图片不显示数据问题

echarts 图表切换功能（不改变数据，只切换图形）

echarts：tab 切换效果

[echarts] clear 和 dispose 的区别和使用场景

ECharts formatter 属性设置 3 种方式（字符串模板，函数模板，回调函数）

[Echarts] 如何自定义 tooltip formatter