Echarts技巧

最新推荐文章于 2024-02-01 09:26:56 发布

狮子座的程序员

最新推荐文章于 2024-02-01 09:26:56 发布

阅读量135

点赞数

分类专栏： VUE # Web前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42247720/article/details/125762504

版权

Web前端同时被 2 个专栏收录

28 篇文章 5 订阅

订阅专栏

VUE

26 篇文章 2 订阅

订阅专栏

echarts随着窗口大小变化

window.addEventListener("resize", () => {
  if(myChart){
    myChart.resize()
  }
})

echarts设置饼图的显示

emphasis: {
  label: {
    show: true,
    fontSize: '30',
    fontWeight: 'bold',
    formatter:'{c}\n\n{b}'   //c是value，b是name
  }
},

在这里插入图片描述

echarts设置可选标题

legend: {
  top: '5%',
  left: 'left',
  orient: 'vertical',
  textStyle: { //图例文字的样式
    fontSize: 14
  },
},

在这里插入图片描述

饼图的

var datas = [
    { value: 1048, name: '报警设备', itemStyle:{color:'#C11A17'} },
    { value: 735, name: '预警设备', itemStyle:{color:'#F9F26B'} },
    { value: 580, name: '在线设备', itemStyle:{color:'#00CC2C'} },
    { value: 484, name: '离线设备', itemStyle:{color:'#AFAEAA'} }
];
legend: {
    right: 'right',
    y: 'center',
    orient: 'vertical',
    textStyle: {
        rich: {
            name: {
                verticalAlign: 'right',
                align: 'left',
                width: 100,
                fontSize: 12,
                color: 'white'
            },
            value: {
                align: 'left',
                width: 55,
                fontSize: 12,
                color: 'white'
            }
        },
        color: '#54bef9'
    },
    data: datas.map((item) => item.name),
    formatter: function (name) {
        var total = 0;
        var tarValue;
        for (var i = 0; i < datas.length; i++) {
            total += datas[i].value;
            if (name === datas[i].name) {
                tarValue = datas[i].value;
            }
        }
        var p = Math.round((tarValue / total) * 100);
        return (
            '{name| ' +
            name +
            '}  ' +
            '{value| ' +
            p +
            '%} '
        );
    }
},