Echarts3

時間 2019-11-21

標籤 echarts3 echarts 简体版

原文原文鏈接

今天用想在後臺首頁作個圖表，看到highcharts沒用喜歡的樣式javascript

想起了Echarts，百度了下，發現不同了呢，原來出了Echarts3html

感受這個比Echarts2好用多了java

下載了個精簡版，echarts.simple.min.jsecharts

使用起來也很是簡單dom

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.simple.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
    },
    series: [
        {
            name:'訪問來源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

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

可是和他給的示例不同，因而去在線構建，組件那選擇上，工具欄，下載工具

這樣下載了echarts.min.js，搜索引擎

修改代碼，引入的js文件處spa

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

完成，和官方的示例同樣啦code

相關標籤/搜索

echarts3

echarts3.x

flask+sqlite3+echarts3

flask+sqlite3+echarts3+ajax

flask+socketio+echarts3

每日一句

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