美文网首页
Echarts 图例、坐标轴数据(i18n)国际化

Echarts 图例、坐标轴数据(i18n)国际化

作者: NemoExpress | 来源:发表于2021-05-13 11:39 被阅读0次

legend的数据需要与 series的数据中的 name保持一一对应的关系,可以将这两处都传入国际化对应的 key,在 legend.formatter和 series.label.formatter使用回调函数的形式返回国际化处理后的显示值

Tips:在语言切换时,需要点击一个图例才会触发legend和 series的切换,需要通过 watch监听,手动触发一下 setOption(),不需要重新设置配置项

export defaut {
    data() {
        return {
            myChart: null,
            option: null,
        }
    },
    mounted() {
        let key = 'common.type.';
        let legendData = [
            `${key}type1`,
            `${key}type2`,
            `${key}type3`,
            `${key}type4`,
        ];
        let seriesData = [
            { value: 0, name: `${key}key1` },
            { value: 0, name: `${key}key2` },
            { value: 0, name: `${key}key3` },
            { value: 0, name: `${key}key4` }
        ];
        this.option = {
            legend: {
                orient: 'vertical',
                left: 'left',
                data: legendData,
                formatter: (params) => {
                    return this.$t(params);
                }
            },
            series: [{
                data: seriesData,
                type:'pie',
                radius: '60%',
                center: ['60%', '60%'],
                label: {
                    normal: {
                        formatter: (params) => {
                            return this.$t(params.name);
                        }
                    }
                }
            }]
        }
        this.myChart.setOption(this.option);
    },
    watch: {
        '$i18n.locale'(newValue) {
            // 不需要重新设置配置项,只需要手动触发一下setOption()
            this.myChart.setOption(this.option)
        }
    }
}

来自 iView & vue-i18n & echarts遇到的问题和解决方法

相关文章

  • Echarts 图例、坐标轴数据(i18n)国际化

    legend的数据需要与 series的数据中的 name保持一一对应的关系,可以将这两处都传入国际化对应的 ke...

  • 2018-08-17

    echarts图例展示数据 引入echarts-better 配置如下 需要data有数据 series : [ ...

  • 2018-08-17

    echarts图例旋转 引入echarts-better 图例旋转配置如下 legend: { rotation:...

  • highchart

    组成 标题(Title)坐标轴(Axis)数据列(Series)数据提示框(Tooltip)图例(Legend)标...

  • angular 国际化 (i18n)

    Internationalization (i18n) 国际化 (i18n) If you are working...

  • R语言绘图之guide

    Guides图例与增加坐标轴 图例函数: guide_colorbar()/guide_colourbar() 用...

  • 莫烦Matplotlib基本使用

    设置坐标轴 移动坐标轴 关于legend图例 关于annotation标注 设置坐标轴 移动坐标轴 关于legen...

  • Matplotlib模块-阶段二

    设置图例 设置注解 设置坐标轴可见度 散点图 柱状图 等高线 设置图例 设置注解 设置坐标轴可见度 散点图 简略散...

  • matplotlib 画图的相关设置:坐标轴刻度字体、大小等

    导入包 设置坐标轴范围 设置坐标轴名称、字体、大小 设置坐标轴刻度、字体、大小 标题、字体、大小 图例、字体、大小...

  • 2.2展示数据Matpoltlib

    1. 基本使用 基本用法 figure图像 设置坐标轴 调整坐标轴 图例legend 标注annotation 能...

网友评论

      本文标题:Echarts 图例、坐标轴数据(i18n)国际化

      本文链接:https://www.haomeiwen.com/subject/qabtjltx.html