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为分散两边
                },
            axisLine:{
                show:true
                },
            splitLine: {
            show: true          //网格线是否显示
            },
            axisLabel:{
                rotate:40    //x轴旋转度数
            }
        }
    ],
    yAxis : {
        show:true,
        splitLine:{
            show:false          //网格线是否显示
        }
    },
    series : [
        {
            name:'直接访问',
            stack:'直接访问',
            type:'bar',
            data:[10, 52, 200, 334, 390, 330, 220]
        },{
            name:'haha',
            stack:'直接访问',
            type:'bar',
            data:[10, 52, 200, 334, 390, 330, 220]
        },{
            name:'yaya',
            stack:'直接访问',
            type:'bar',
            data:[10, 52, 200, 334, 390, 330, 220]
        },
        {
            name:'heihie',
            type:'bar',
            data:[100,561,930,710,750,370,300]
        }
    ]
};

雷达图

option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配', '实际开销']
    },
    radar: {
        //调整雷达图的格式,开启后为圆形
        // shape: 'circle',
        
        //雷达图通常要设置字符的背景颜色
        name: {
            textStyle: {
                color: '#fff',   //白色
                backgroundColor: '#999',  //灰色
                borderRadius: 3,
                padding: [3, 5]
          }
        },
        indicator: [
           { name: '销售', max: 6500},
           { name: '管理', max: 16000},
           { name: '信息技术', max: 30000},
           { name: '客服', max: 38000},
           { name: '研发', max: 52000},
           { name: '市场', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销',
        type: 'radar',
        //设置线条覆盖的颜色，通常不开启
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销'
            }
        ]
    }]
};

折柱混合图

app.title = '折柱混合';

option = {
    //鼠标移动可视数据
    tooltip: {
        trigger: 'item',  //两个参数   item和axis  
    },
    //鼠标移动可视数据
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},  //数据视图可读写按钮
            magicType: {show: true, type: ['line', 'bar']},  //图像类型转换按钮
            restore: {show: true},       //还原重置按钮
            saveAsImage: {show: true}    //将图片保存到本地按钮
        }
    },
    //设置图例
    legend: {
        data:['蒸发量','降水量']  
    },
    //X轴
    xAxis: [
        {
            name:'月份',
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],

        }
    ],
    //y轴
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,   
            interval: 50,  //数据步长
            axisLabel: {
                formatter: '{value} ml'   //格式化输出字符
            }
        }
    ],
    //数据
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
       {
            name:'降水量',
            type:'line',
            smooth: true,
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
    ]
};

词云图

需添加插件 echarts-wordcloud.js

option = {
            title:{
                text:"百度",
                link:"http://www.baidu.com"
            },
            tooltip:{
                show:true
            },
            series:[
                {
                    name:"百度",
                    type:"wordCloud",
                    //字符云大小，支持绝对值%和百分比
                    size:["80%",'80%'],
                    //文字旋转角度可选列表，默认会随机从水平和垂直两个方向选择，可以设置多个可选角度
                    textRotation :[0,45,90,-45],
                    //字体和字体之间的间隔
                    textPadding:0,
                    //字体大小自动计算配置，默认开启自动计算，陈旭会根据每个数据的value大小以及画布大小
                    autoSize: {
                        enable:true,
                        minSize:14
                    },
                    data:[

                        {
                            name:"My",
                            value:"100"
                        },

                        {
                            name:"family",
                            value:"4"
                        },

                        {
                            name:"lives",
                            value:"4"
                        },

                        {
                            name:"on",
                            value:"9"
                        },

                        {
                            name:"this",
                            value:"4"
                        },

                        {
                            name:"street",
                            value:"10"
                        },

                        {
                            name:"In",
                            value:"2"
                        },

                        {
                            name:"the",
                            value:"7"
                        },

                    ]
                }
            ]
        };

地图

需添加插件 china.js

var option = {
    title:{
        text:"手机销量",
        subtext:"纯属虚构",
        x:"center"
    },
    tooltip:{
        trigger:"item"
    },
    legend:{
        orient:"vertical",
        x:"left",
        data:["iphone3","iphone4","iphone5"]
    },
    dataRange:{
        min:0,
        max:2500,
        x:"left",
        y:"bottom",
        text:["高","低"],
        calculable:true
    },
    toolbox:{
        show:true
    },
    series:[
        {
            name:'iphone3',
            type:'map',
            mapType:"china", //地图类型，支持world,china以及全国34个省份自治区
            roam:false, //是否开启滚轮缩放和拖拽漫游
            mapValueCalculation:"sum",//地图数值的计算方式，还有一个参数是average
            itemStyle:{
                normal:{
                    label:{
                        show:true
                    }
                }
            },
            data:[{name:"烟台",value:234},
                {name:"上海",value:532},
                {name:"天津",value:550},
                {name:"青海",value:1550},
                {name:"云南",value:150},
                {name:"内蒙古",value:540}]
        },
        {
            name:'iphone4',
            type:'map',
            mapType:"china", //地图类型，支持world,china以及全国34个省份自治区
            roam:false, //是否开启滚轮缩放和拖拽漫游
            mapValueCalculation:"sum",
            itemStyle:{
                normal:{
                    label:{
                        show:true
                    }
                }
            },
            data:[{name:"烟台",value:234},
                {name:"上海",value:532},
                {name:"天津",value:550},
                {name:"青海",value:1550},
                {name:"云南",value:150},
                {name:"内蒙古",value:540}]
        },
        ]
}