首页 > 代码库 > 使用echarts

使用echarts

2024-08-25 03:32:34   211人阅读

<html>
<head>
    <script type="text/javascript" src=http://www.mamicode.com/‘echarts.min.js‘></script>>    //http://echarts.baidu.com/echarts2/doc/example.html中文api地址
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById(‘main‘)); 

        // 过渡---------------------
        myChart.showLoading({
            text: ‘正在努力的读取数据中...‘,    //loading话术
        });

        // ajax getting data...............

        // ajax callback
        myChart.hideLoading();

        // 图表使用-------------------
        var option = {
            legend: {                                   // 图例配置
                padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5
                itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
                data: [‘ios‘, ‘android‘]
            },
            tooltip: {                                  // 气泡提示配置
                trigger: ‘item‘,                        // 触发类型，默认数据触发，可选为：‘axis‘
            },
            xAxis: [                                    // 直角坐标系中横轴数组
                {
                    type: ‘category‘,                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    data: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
                }
            ],
            yAxis: [                                    // 直角坐标系中纵轴数组
                {
                    type: ‘value‘,                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                    boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比
                    splitNumber: 4                      // 数值轴用，分割段数，默认为5
                }
            ],
            series: [
                {
                    name: ‘ios‘,                        // 系列名称
                    type: ‘line‘,                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
                },
                {
                    name: ‘android‘,                    // 系列名称
                    type: ‘line‘,                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
                }
            ]
        };
        myChart.setOption(option);

        // 增加些数据------------------
        option.legend.data.push(‘win‘);
        option.series.push({
                name: ‘win‘,                            // 系列名称
                type: ‘line‘,                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                data: [12, 283, 485, 6, 33, 33, 44, 89, 343, 123, 45, 123]
        });
        myChart.setOption(option);

    </script>
</body>
</html>

 

使用echarts


联系
我们