echarts的基本用法

最新推荐文章于 2024-05-28 11:11:34 发布

梦里梦见梦不见的

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量537

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43240792/article/details/93468945

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、引入echarts

下载地址：http://echarts.baidu.com/download.html

可下载精简版或完整版

<script type="text/javascript" src="echarts.min.js"></script>

二、使用echarts

在绘图前需要为echarts准备一个具备高宽的DOM容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <!-- 柱状图bar -->
    <div id="echarts_bar" style="width: 600px;height:400px;"></div>
    <!-- 柱状图line -->
    <div id="echarts_line" style="width: 600px;height:400px;"></div>
    <!-- 饼状图pie-->
    <div id="echarts_pie" style="width: 600px;height:400px;"></div>
    <!-- 地图map-->
    <div id="echarts_map" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

1、柱状图

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_bar'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

2、折线图

<script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_line'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

3、饼状图

<script type="text/javascript">
 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_pie'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'pie',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

4、中国地图

第一步、写入随机数来测试数据：
 
function randomData() {  
     return Math.round(Math.random()*500);  
} 
 
第二部、写入数据
var mydata = [  
                {name: '北京',value: '100' },{name: '天津',value: randomData() },  
                {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
                {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
                {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
                {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
                {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
                {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
                {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
                {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
                {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
                {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
                {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
                {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
                {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
                {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
                {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
                {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
            ];
 
 
第三步、实例化option，配置属性，data置入数据
var optionMap = {  
                backgroundColor: '#FFFFFF',  
                title: {  
                    text: '全国地图大数据',  
                    subtext: '',  
                    x:'center'  
                },  
                tooltip : {  
                    trigger: 'item'  
                },  
                
                //左侧小导航图标
                visualMap: {  
                    show : true,  
                    x: 'left',  
                    y: 'center',  
                    splitList: [   
                        {start: 500, end:600},{start: 400, end: 500},  
                        {start: 300, end: 400},{start: 200, end: 300},  
                        {start: 100, end: 200},{start: 0, end: 100},  
                    ],  
                    color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
                },  
                
                //配置属性
                series: [{  
                    name: '数据',  
                    type: 'map',  
                    mapType: 'china',   
                    roam: true,  
                    label: {  
                        normal: {  
                            show: true  //省份名称  
                        },  
                        emphasis: {  
                            show: false  
                        }  
                    },  
                    data:mydata  //数据
                }]  
            };  
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts_map'));
 
        //使用制定的配置项和数据显示图表
        myChart.setOption(optionMap);

异步请求的一个小栗子：

<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
    var myChart;

    $(function () {

        load();
    });

    function load() {
        require.config({
            paths: {
                //echarts: '../Scripts/Echartsjs'
                echarts: '../Scripts/NewEcharts'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar'
                //'echarts/chart/line'
                //'echarts/chart/map'
            ],
            DrawEchart
        );
    }

    function DrawEchart(ec) {

        //--- 折柱 ---
        myChart = ec.init(document.getElementById('EchartsDiv'));

        //图表显示提示信息
        myChart.showLoading({
            text: "图表数据正在努力加载..."
        });
        //定义图表
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            //color: '#66B3FF',
            animation: false,
            addDataAnimation: false,
            calculable: true,
            xAxis: [
                {
                   
                    type: 'value',
                    boundaryGap: [0, 0.01]
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false
                    },//分隔线
                    //splitArea: { show: false },//分隔区域
                    type: 'category',
                    // data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
                    data:[]
                }
            ],
            series: [
                {
                    name: '资源使用情况',
                    color: '#66B3FF ',
                    type: 'bar',
                    // data: [18203, 23489, 29034, 104970, 131744, 630230]
                    data:[]
                }
            ]
        };


        //通过Ajax获取数据
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "/Report/GetVMUsedInfo",
            dataType: "json", //返回数据形式为json
            data: {rnd:Math.random()},
            success: function(result) {
                if (result) {
                    //将返回的category和series对象赋值给options对象内的category和series
                    //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                    option.yAxis[0].data = result.yAxis;
                    option.series[0].data = result.series;
                    myChart.hideLoading();
                    myChart.setOption(option);
                }
            },
            error: function(errorMsg) {
                alert("图表请求数据失败啦!");
            }
        });
        //myChart.hideLoading();
        //myChart.setOption(option);
    }
</script>

梦里梦见梦不见的

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts的基本用法

目录一、引入echarts二、使用echarts1、柱状图2、折线图3、饼状图4、中国地图异步请求的一个小栗子：一、引入echarts下载地址：http://echarts.baidu.com/download.html可下载精简版或完整版<script type="text/javascript" src="echarts.min.js"&gt...
复制链接

扫一扫