Echarts可视化

最新推荐文章于 2024-08-13 18:13:57 发布

FQueen_80

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量910

点赞数 2

分类专栏：前端-echarts

本文链接：https://blog.csdn.net/qq_37599725/article/details/78302293

版权

前端-echarts 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Echarts可视化
目标：学习和使用echarts库在网页端可视化
这里写图片描述

用canvas来画一个圆

<body>
<canvas id="mycanvas" width="600px" height="300px">
    您的浏览器不支持canvas
    <!--只有在浏览器不支持canvas标签的时候此语言才会显示-->
</canvas>
<script>
    var canvas=document.getElementById('mycanvas');//定义变量获取画布
    var context=canvas.getContext('2d');//设置绘制环境为2d
    //开始一个新的绘制路径
    context.beginPath();
    //设置弧线的颜色
    context.strokeStyle="blue";
    //先创建一个对象，确定圆的圆心的位置，以及半径的长度
    var circle={
        x:100, //圆心的x轴坐标值
        y:100,//圆心的y轴坐标值
        r:100 //圆的半径的大小
    }
    //然后画一个圆心为（100,100），半径为10的圆
    context.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false);//参数分别是：坐标，半径，起始角度，结束角度，顺时针；
    context.stroke();
</script>
</body>

效果展示
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>two</title>
    <!--重点 引入ehcarts.js-->
    <script src="echarts.min.js"></script>
</head>
<body>
<!--写一个div，相当于一个容器-->
<div id="main" style="width:900px;height:600px"></div>
<!--基于准备好的dom，初始化-->
<script type="text/javascript">
    var mychar=echarts.init(document.getElementById('main'));
//自定义一个对象，对象里面有属性及其属性值
    var option={
        title:{
            text:'Echarts入门示例'
        },
//        工具箱
        toolbox:{
            show:true,
            feature:{
                saveAsImages:{
                    show:true
                }
            }
        },
//        图例
        legend:{
            data:['销量']
        },
//        x轴
        xAxis:{
            data:["衬衫","羊毛衫","高跟鞋","牛仔裤","雪纺衫","帆布鞋"]
        },
       yAxis:{},
//        数据
        series:[{
            name:'销量',
            type:'bar',
            data:[10,23,54,67,60,67]
        }]
    };
//    使用刚指定的配置项和数据显示图表
    mychar.setOption(option);
</script>
</body>
</html>

这里写图片描述
注意：其中type是bar,那就认为这是一个直方图

根据上述示例可以了解到echarts需要的组件：
（1）需要一个标题
（2）Legend对应的就是图例。他可以让一个量显示或者隐藏，比如点击销量就会出现如下图
这里写图片描述
（3）x轴是自己定义的衬衫，羊毛衫等等；
（4）Y轴是自己定义的数据；
（5）主体就是我们所画的直方图

把bar改成line就是折线图

两个图进行叠加就是增加数据

Title字段有下面几个字段{
1：show：默认的就是true；
2：text：标题内容
3 : subtext:副标题的内容，
4：border

}:
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>two</title>
    <!--重点 引入ehcarts.js-->
    <script src="echarts.min.js"></script>
</head>
<body>
<!--写一个div，相当于一个容器-->
<div id="main" style="width:900px;height:600px"></div>
<!--基于准备好的dom，初始化-->
<script type="text/javascript">
    var mychar=echarts.init(document.getElementById('main'));
    //自定义一个对象，对象里面有属性及其属性值
    var option={
        title:{
            text:'Echarts入门示例',
            subtext:'Echarts'
        },
//        工具箱
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                },
                dataView:{
                    show:true
                },
                restore:{
                    show:true
                }
            }
        },
//        tooltip弹框组件：
//        图例
        legend:{
            data:['衬衫','羊毛衫','高跟','牛仔裤','雪纺衫','帆布鞋']
        },
//        x轴
//        xAxis:{
//            data:["衬衫","羊毛衫","高跟鞋","牛仔裤","雪纺衫","帆布鞋"]
//        },
//       yAxis:{},
//        数据
        tooltip:{
            show:true,
            item:["衬衫","羊毛衫","高跟鞋","牛仔裤","雪纺衫","帆布鞋"]
        },
        series:[{
            name:'销量',
            type:'pie',
            radius:'55%',
            center:['50%','60%'],
//                    markPoint:{
//                        data:[
//                            {type:'max',name:'最大值'},
//                            {type:'min',name:'最小值'}
//                        ]
//                    },
//                    markLine:{
//                        data:[
//                            {type:'average',name:'平均值'}
//                        ]
//                    },
            data:[
                {value:10,name:'衬衫'},
                {value:23,name:'羊毛衫'},
                {value:54,name:'高跟鞋'},
                {value:67,name:'牛仔裤'},
                {value:60,name:'雪纺衫'},
                {value:67,name:'帆布鞋'},
            ]
        },
//            {
//                name:'产量',
//                type:'line',
//                data:[13,29,77,83,95,101]
//            }
        ]
    };
    //    使用刚指定的配置项和数据显示图表
    mychar.setOption(option);

</script>
</body>
</html>
</body>
</html>

这里写图片描述
常用图：仪表盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表盘</title>
    <meta charset="UTF-8">
    <title>two</title>
    <!--重点 引入ehcarts.js-->
    <script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:900px;height:600px"></div>
<!--基于准备好的dom，初始化-->
<script type="text/javascript">
    var mychar=echarts.init(document.getElementById('main'));
    //自定义一个对象，对象里面有属性及其属性值
    var option={
        title:{
            text:'Echarts入门示例',
            subtext:'Echarts'
        },
//        工具箱
        toolbox:{
            show:true,
            feature:{
                saveAsImage:{
                    show:true
                },
                dataView:{
                    show:true
                },
                restore:{
                    show:true
                }
            }
        },
//        tooltip弹框组件：
//        图例
        legend:{
            data:['完成率']
        },
//        x轴
//        xAxis:{
//            data:["衬衫","羊毛衫","高跟鞋","牛仔裤","雪纺衫","帆布鞋"]
//        },
//       yAxis:{},
//        数据
        tooltip:{
            show:true,
            item:['完成率']
        },
        series:[{
            name:'完成率',
            type:'gauge',
//            radius:'55%',
//            center:['50%','60%'],
//                    markPoint:{
//                        data:[
//                            {type:'max',name:'最大值'},
//                            {type:'min',name:'最小值'}
//                        ]
//                    },
//                    markLine:{
//                        data:[
//                            {type:'average',name:'平均值'}
//                        ]
//                    },
            detail:{
            formatter:'{value}%'
            },
            data:[
                {value:60,name:'完成率'},
//                {value:23,name:'羊毛衫'},
//                {value:54,name:'高跟鞋'},
//                {value:67,name:'牛仔裤'},
//                {value:60,name:'雪纺衫'},
//                {value:67,name:'帆布鞋'},
            ]
        },
//            {
//                name:'产量',
//                type:'line',
//                data:[13,29,77,83,95,101]
//            }
        ]
    };
    //    使用刚指定的配置项和数据显示图表
    mychar.setOption(option);

</script>
</body>
</html>