Echarts入门教程

最新推荐文章于 2024-03-25 10:15:00 发布

stack君

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量347

点赞数

分类专栏：插件文章标签： echarts 前端

原文链接：https://www.cnblogs.com/nanyang520/p/11002189.html

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单

1、从官方网站中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。

2、从前端页面引入echarts.js，后即可使用

<script src="js/echarts.min.js"></script>

3、请看如下使用案例：

大致就是引入js
选一个图表容器（DIV）
初始化echarts对象并绑定到该容器上
给绑定的echarts容器配置图表参数来展示数据
根据业务结合官网API的属性和方法对图表进行自由控制

<!DOCTYPE html>
<html>
    <head>
    
        <meta charset="utf-8" />
        <title>echarts入门</title>
	    <style>        
	        .box{
	            width:900px;
	            height: 900px;
	            border:4px double seagreen;
	            margin: auto;
	            float: left;
	        }        
	    </style>
	    <script src="js/echarts.min.js"></script>
	    
    </head>
   
    <body>
            
        <div class="box"></div>
        <div class="box"></div>
        
    </body>
    
    <script>

        var myChart1 = echarts.init(document.getElementsByClassName('box')[0]);
        var myChart2 = echarts.init(document.getElementsByClassName('box')[1]);

　　　　 //图表的配置项和数据
        var option1 =  {
            title: {text:'商户营业状态'},

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'right',
                y:'bottom',
                data:['营业中','未营业']
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : ['30%', '40%'],
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true,
                                position : 'center',
                                textStyle : {
                                    fontSize : '20',
                                    fontWeight : 'bold'
                                }
                            }
                        }
                    },
                    data:[
                        {value:635, name:'营业中'},
                        {value:310, name:'未营业'},
                    ]
                }
            ]
        };
                            
        
        var option2 =  {
            title:{
                text:'服装店销售统计'
            },
            //提示框组件
            tooltip:{
                //坐标轴触发，主要用于柱状图，折线图等
                trigger:'axis'
            },
            //图例
            legend:{
                data:['销量'],
                x:'right'
            },
            //横轴
            yAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            //纵轴
            xAxis:{},
            //系列列表。每个系列通过type决定自己的图表类型
            series:[{
                name:'销量',
                //折线图
                type:'bar',
                data:[5, 20, 36, 10, 10, 20]
            }]
        };
        
        myChart1.setOption(option1);
        
        myChart2.setOption(option2);
        
    </script>
    
    
</html>

4、上图创有两个DIV，分别配置了Echarts显示参数，运行如下图：

在这里插入图片描述
各位可以拷贝运行下，别忘了先下载echarts.js。

接下来，就是真正入门教程了，提供一波网站快速学习：

echartsAPI参考

echarts案例参考

百度echarts教程

从各大教程网站的案例中直接练习，结合API调整样式，能在最快的时间上手！
在这里插入图片描述

祝大家学习愉快~

stack君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts入门教程

引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单1、从官方网站中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。2、从前端页面引入echarts.js，后即可使用<script src="js/echarts.min.js"></script>3、请看如下使用案例：大致就是引入js选一个图表容器（DIV）初始化echarts对象并绑定到该容器上给绑定的ech
复制链接

扫一扫