1.柱状图和饼图的图例联动

假设一个页面分别存在一个柱状图和一个饼图，抛开数据不看是否对应，两个图形有着相同个数和名称的图例，如下图所示：

我们可以开启图例事件的联动，即点击柱状图图例，同时显示或隐藏柱状图和饼图的图形；同理，点击饼图图例，同时显示或隐藏柱状图和饼图的图形。

下面我们来看具体实现代码

var myChart1 = echarts.init(获取的柱状图dom节点);
var myChart2 = echarts.init(获取的饼图dom节点);

// 此处省略渲染和自适应设置

// group属性用于联动，当两个图例拥有相同的group属性时即可
// 初始化将柱状图的group属性赋值
myChart1.group = "group1";

// 图例点击事件时开启联动
// 这里通过on方法监听legendselected事件(图例点击事件)
// 当点击任意一个图形的图例时触发点击事件，将饼图的group属性赋予柱状图相同的值，然后通过connect开启联动
// 实际上无论点击哪个图形的图例都会触发这两个事件，因为一旦点击便开启联动效果
// 这里在饼图图例点击事件方法下有一个定时函数，在调用完成之后取消联动效果
// 这里有一个疑点，无法直接取消联动效果，而是通过定时函数来取消，大胆猜测是因为echarts执行时为异步操作，所以添加setTimeout()将取消联动放在所有代码执行完成后再执行
myChart1.on("legendselectchanged", function (obj) {
  myChart2.group = "group1";
  echarts.connect("group1");
});
myChart2.on("legendselectchanged", function (obj) {
  myChart2.group = "group1";
  echarts.connect("group1");
  setTimeout(() => {
    myChart2.group = "";
    echarts.connect("");
  }, 1);
});

至于为什么要在点击后取消联动效果(没错，为了避免tooltip的联动效果)，具体如下图：

2.横向柱状图

实现一个包含六条数据的排名，如下图所示：

废话不多说，直接上代码

<script>
import * as echarts from "echarts"
import ele from 'element-resize-detector'
export default {
  mounted() {
    this.drawChart3()
  },
  methods: {
    drawChart3(){
        let myChart = echarts.init(获取的横向柱状图dom节点)
        let options = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: params => {
                    return params[0].value[0] + '<br/>' + params[0].marker +  '入驻面积: ' + this.formatNum(params[0].value[1]) + '㎡'
                },
                textStyle: {
                    align: 'left'
                }
            },
            grid: {
               top: 12,
               bottom: 6,
               left: 180,
               right: '6%'
            },
            xAxis: {
                type: 'value', // 核心参数，将x轴变成数值轴
                show: false,
                boundaryGap: true,
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                },
                minInterval: 50
            },
            yAxis: {
                type: 'category', // 核心参数，将y轴变成类目轴
                inverse: true,
                axisLabel: {
                    inside: true,
                    color: '#fff',
                    verticalAlign: 'middle',
                    margin: -160,
                    formatter: (params, index) => {
                        if(params.length > 10) {
                            params = params.slice(0, 10) + '...'
                        }
                        if((index+1)==1){
                            return `{${index+1}|${index+1}} {fixed|${params}}`
                        }else if((index+1)==2){
                            return `{${index+1}|${index+1}} {fixed|${params}}`
                        }else if((index+1)==3){
                            return `{${index+1}|${index+1}} {fixed|${params}}`
                        }else {
                            return `{4|${index+1}} {fixed|${params}}`
                        }
                    },
                    rich: {
                        fixed: {
                            align: 'left'
                        },
                        1: {
                            align: 'center',
                            width: 15,
                            height: 15,
                            backgroundColor: 'rgb(248,180,19)',
                            color: 'rgb(28,33,82)',
                            borderRadius: 15,
                        },
                        2: {
                            align: 'center',
                            width: 15,
                            height: 15,
                            backgroundColor: 'rgb(226,225,235)',
                            color: 'rgb(28,33,82)',
                            borderRadius: 15,
                        },
                        3: {
                            align: 'center',
                            width: 15,
                            height: 15,
                            backgroundColor: 'rgb(241,112,31)',
                            color: 'rgb(28,33,82)',
                            borderRadius: 15,
                        },
                        4: {
                            align: 'center',
                            width: 15,
                            height: 15,
                            backgroundColor: 'rgb(204,203,204)',
                            color: 'rgb(28,33,82)',
                            borderRadius: 15,
                        }
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            dataset: {
                source: [
                    ['name', 'num'],
                    ['深圳市南山区腾讯大厦1', '666666'],
                    ['深圳市南山区腾讯大厦2', '555555'],
                    ['深圳市南山区腾讯大厦3', '444444'],
                    ['深圳市南山区腾讯大厦4', '333333'],
                    ['深圳市南山区腾讯大厦5', '222222'],
                    ['深圳市南山区腾讯大厦6', '111111'],
                ]
            },
            series: [
                {
                    type: 'bar',
                    color: 'rgb(0,153,255)',
                    barWidth: "4",
                    label: {
                        show: true,
                        position: 'insideBottomRight',
                        color: '#fff',
                        formatter: (value) => {
                            return this.formatNum(value.data[1])
                        }
                    },
                    encode: { // 核心参数，将dataset中的num值展示在x轴的纬度
                        x: 'num'
                    },
                    itemStyle: {
                        barBorderRadius: [34, 34, 34, 34]
                    }
                }
            ]
        }
        myChart.setOption(options)
        // 使用element-resize-detector插件自适应
        ele().listenTo(获取的横向柱状图dom节点, function(e) {
            myChart.resize();
        })
    },
    // 千分位显示
    formatNum(value) {
        if (!value && value !== 0) return 0;
        let str = value.toString();
        let reg =
            str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg, "$1,");
    }
  }
}
</script>