Echarts可视化

来源：互联网发布：淘宝设计师编辑：程序博客网时间：2024/06/06 02:02

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>

结果展示
这里写图片描述

阅读全文

1 0