echarts图标案例

饼状图举例

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        //鼠标悬浮显示数据的格式化
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'   //
        },
        //左上角显示的内容
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            //data数据内容要跟series.data中的name属性值保持一致
        },
        series: [
            {
                name: '访问来源',//{a}的取值来源
                type: 'pie',
                radius: ['50%', '70%'],//两个圆的半径取值
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'left'//legend数据显示位置
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',//控制显示数据的字体大小
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true//显示数据的连接线
                },
                data: [
                    {value: 335, name: '直接访问'},//name为{b}的取值来源
                    {value: 310, name: '邮件营销'},//value为{c}的取值来源
                    {value: 234, name: '联盟广告'},//{d}为其所占百分百
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ]
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    //给图表绑定单击事件
    myChart.on('click',pieConsole);
    function pieConsole(param) {
        //获取data长度
        //alert(option.series[0].data.length);	//5
        //获取第N个data的值
        //alert(option.series[0].data[1].value); //310
        //获取series中param.dataIndex事件对应的值
	alert(param.name +":"+param.value);
    }
</script>
</body>
</html>

柱状图举例

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");//获取dom节点对象
    var myChart = echarts.init(dom);//初始化
    var app = {};
    option = null;
     //option模板
    option = {
        title: {
            text: '标题的名称',
            subtext: '副标题'
        },
        //数据悬浮效果
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['类型1唯一标识', '类型2唯一标识']
        },
        toolbox: {
            show:true,//是否转换为其他类型的图
            feature: {
                dataView: {show: true, readOnly: false},//转换为可修改的数据视图
                magicType: {show: true, type: ['line', 'bar']},//转换为折线图
                restore: {show: true},//还原
                saveAsImage: {show: true}//保存为图片
            }
        },
        calculable: true,
        xAxis: [//行数据
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '类型1唯一标识',
                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],
                //定位到最大值和最小值
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                //计算平均值并画线
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '类型2唯一标识',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 122.2, 48.7, 18.8, 6.0, 2.3],
                markPoint: {
                    data: [
                        {name: '年最高',type:"max"},
                        {name: '年最低',type:"min"}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);//装配模板
    }
</script>
</body>
</html>

posted @ 2020-08-28 15:07 懂得归零阅读(246) 评论(0) 收藏举报

刷新页面返回顶部

懂得归零

echarts图标案例

公告