Echarts --------使用步骤

落日映苍穹つ 2022-08-22 14:29 198阅读 0赞

**方式1：模块化单文件引入**

**1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。**

**2、新建<script>标签引入模块化单文件echarts.js**

**3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见[引入ECharts2][ECharts2]**

**4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc**

我的饼图实例

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
    </head>
    
    <body>
        
        <div id="main" style="height:400px"></div>
        
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
        <script type="text/javascript">
            // 路径配置
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });
            
            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main')); 
                    
                /*     var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data:['销量'],
                            textStyle: {
                                color: '#333',
                                fontSize: 12
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                "name":"销量",
                                "type":"bar",
                                "data":[5, 20, 40, 10, 10, 20]
                            }
                        ]
                    }; */
                    
       /*            var  option = {
                    	    title : {
                    	        text: '未来一周气温变化',
                    	        subtext: '纯属虚构'
                    	    },
                    	    tooltip : {
                    	        trigger: 'axis'
                    	    },
                    	    legend: {
                    	        data:['最高气温','最低气温']
                    	    },
                    	    toolbox: {
                    	        show : true,
                    	        feature : {
                    	            mark : {show: true},
                    	            dataView : {show: true, readOnly: false},
                    	            magicType : {show: true, type: ['line', 'bar']},
                    	            restore : {show: true},
                    	            saveAsImage : {show: true}
                    	        }
                    	    },
                    	    calculable : true,
                    	    xAxis : [
                    	        {
                    	            type : 'category',
                    	            boundaryGap : false,
                    	            data : ['周一','周二','周三','周四','周五','周六','周日']
                    	        }
                    	    ],
                    	    yAxis : [
                    	        {
                    	            type : 'value',
                    	            axisLabel : {
                    	                formatter: '{value} °C'
                    	            }
                    	        }
                    	    ],
                    	    series : [
                    	        {
                    	            name:'最高气温',
                    	            type:'line',
                    	            data:[11, 11, 15, 13, 12, 13, 10],
                    	            markPoint : {
                    	                data : [
                    	                    {type : 'max', name: '最大值'},
                    	                    {type : 'min', name: '最小值'}
                    	                ]
                    	            },
                    	            markLine : {
                    	                data : [
                    	                    {type : 'average', name: '平均值'}
                    	                ]
                    	            }
                    	        },
                    	        {
                    	            name:'最低气温',
                    	            type:'line',
                    	            data:[1, -2, 2, 5, 3, 2, 0],
                    	            markPoint : {
                    	                data : [
                    	                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    	                ]
                    	            },
                    	            markLine : {
                    	                data : [
                    	                    {type : 'average', name : '平均值'}
                    	                ]
                    	            }
                    	        }
                    	    ]
                    	}; */
                    
                    var option = {
                    	    title : {
                    	        text: '某站点用户访问来源',
                    	        subtext: '纯属虚构',
                    	        x:'center'
                    	    },
                    	    tooltip : {
                    	        trigger: 'item',
                    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    	    },
                    	    legend: {
                    	        orient : 'vertical',
                    	        x : 'left',
                    	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    	    },
                    	    toolbox: {
                    	        show : true,
                    	        feature : {
                    	            mark : {show: true},
                    	            dataView : {show: true, readOnly: false},
                    	            magicType : {
                    	                show: true, 
                    	                type: ['pie', 'funnel'],
                    	                option: {
                    	                    funnel: {
                    	                        x: '25%',
                    	                        width: '50%',
                    	                        funnelAlign: 'left',
                    	                        max: 1548
                    	                    }
                    	                }
                    	            },
                    	            restore : {show: true},
                    	            saveAsImage : {show: true}
                    	        }
                    	    },
                    	    calculable : true,
                    	    series : [
                    	        {
                    	            name:'访问来源',
                    	            type:'pie',
                    	            radius : '55%',
                    	            center: ['50%', '60%'],
                    	            data:[
                    	                {value:335, name:'直接访问'},
                    	                {value:310, name:'邮件营销'},
                    	                {value:234, name:'联盟广告'},
                    	                {value:135, name:'视频广告'},
                    	                {value:1548, name:'搜索引擎'}
                    	            ]
                    	        }
                    	    ]
                    	};

效果图

![Center][]

**方式二：标签式单文件引入**

效果图

![Center 1][]

[ECharts2]: http://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts2
[Center]: /images/20220722/d2974ad3809d47879233be8e4a74d18d.png
[Center 1]: /images/20220722/b2eef4f46a3f4fd5b88aa939011727ce.png