echarts经典图形案例 | 注释比较详细 | 方便修改

最新推荐文章于 2024-09-23 18:34:38 发布

原创

最新推荐文章于 2024-09-23 18:34:38 发布 · 830 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#可视化 #echarts

本文介绍了如何使用ECharts库创建饼图、堆叠图和雷达图，包括各自的特点和配置参数，帮助读者理解不同图表在展示数据上的应用.

饼图

option = {
    title : {
        text: 'pie图深入学习',
        subtext: '测试副标题',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        //格式化显示提示：  a:series.name   b:data.name  c:data.value  d:(饼图和雷达图才有)
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        //图例的显示方式
        orient: 'vertical',  //竖直显示图例，   横着显示图例参数为 horizontal
        x: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            //饼图大小
            radius : '55%',
            //饼图在div中显示的位置比例
            center: ['50%', '60%'],
            //设置提示属性
            label:{
                formatter: "{b} : {c} ({d}%)"
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
        }
    ]
};

在这里插入图片描述

堆叠图

option = {
    title:{
        text:"堆叠图和柱状图的研究",
        subtext:"用于测试副标题",
        textStyle:{
            //颜色
            color:"#912312",
            //标题粗细
            fontWeight:"700"
        }
    },
    tooltip : {
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    //添加图例
    legend:{
        data:["直接访问","heihie",'haha','yaya']
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: false   //横坐标坐标居中显示，false为分散两边
                },
            ax