Echarts

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

安装方式

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. 逻辑处理
1
<div id="box" style="width:500px;height:500px"></div>
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 设置最大值，最小值与平均值
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 在哪个里面都可以用的，用来调整位置；

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

tooltip 配置提示语

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

toolbox 工具栏

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

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)，颜色和名字。可以通过点击图例控制哪些系列不显示。

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中找到；

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

以上内容全部代码

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

#box {
    width: 100vw;
    height: 100vh;
}
  • html
1
<div id="box"></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
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
1
2
3
4
5
6
7
8
*{
padding: 0;
margin: 0;
}
#box{
    width: 100vw;
    height: 100vh;
}
  • html
1
<div id="box"></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
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入口文件里引入
1
2
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts; //挂载到原型上
  1. 使用
1
2
3
this.myChart = this.$echarts.init(
        document.getElementById("xxx")
   );

获取Echarts的base64地址

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

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

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

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

期望的：

期望的

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

实际上

解决方法

  • 延迟 相机的 拍照时间
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里面

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()销毁实例一下，否则图会重叠在一起；

方案一效果：

方案一

方法一代码：

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>

方案二效果：

方案二

方法二代码：

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

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

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

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

formatter

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

formatter

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

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

formatter

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/>`;
},

解决方法：

1
2
3
tooltip: {
	confine: true,
}

formatter

上面的实例就是

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”作为换行符
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