ECharts報表的使用

時間 2020-06-08

標籤 echarts 報表使用简体版

原文原文鏈接

知道大家懶得手打網址，給大家貼上：http://echarts.baidu.com/echarts2/javascript

一、下載並解壓以後，找到echarts-2.2.7\build\dist\echarts-all.jshtml

二、在工程裏新建一個HTML頁面，完整代碼以下：java

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"  src="./js/echarts-all.js"></script>
<title>ECharts</title>
</head>
<body>

         <!-- 定義div區域 -->
	<div id ="main" style="width:600px;height:400px"></div>
	
<script type="text/javascript">
        // 初始化echarts實例，並關聯div
        var myChart = echarts.init(document.getElementById('main'));
　　　　　//配置報表的數據和參數
        var option={
            backgroundColor: '#2c343c',
            textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
            series : [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:400, name:'搜索引擎'},
                        {value:335, name:'直接訪問'},
                        {value:310, name:'郵件營銷'},
                        {value:274, name:'聯盟廣告'},
                        {value:235, name:'視頻廣告'}
                    ],
                    roseType: 'angle',

                    itemStyle: {
                        emphasis: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    }

                }
            ]
        }


        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);

    </script>

</body>
</html>

　注意ECharts的js的引入路徑正確，便可echarts

效果以下所示：ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。