echarts的基本使用

Posted mzc1997

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts的基本使用相关的知识,希望对你有一定的参考价值。

echarts的基本使用

官网:http://echarts.baidu.com/index.html

ECharts,一个使用 javascript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

echarts能做什么?

报表,各种饼状图柱状图....

示例:http://echarts.baidu.com/examples/

开始使用

在需要的页面引入js文件,常用版足够开发使用

  • 完全版:echarts/dist/echarts.js,体积最大,包含所有的图表和组件,所包含内容参见:echarts/echarts.all.js
  • 常用版:echarts/dist/echarts.common.js,体积适中,包含常见的图表和组件,所包含内容参见:echarts/echarts.common.js
  • 精简版:echarts/dist/echarts.simple.js,体积较小,仅包含最常用的图表和组件,所包含内容参见:echarts/echarts.simple.js
柱状图构建

1)引入echarts的js文件

2)准备一个div,为echarts准备基本的DOM

3)初始化echarts实例

4)指定图表的配置项和数据

配置项参数说明:

title:该统计图标题

tooltip:提示框组件

legend:图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示,也就是说该项配置为一个图标展示多样数据,允许滚动

图例:

xAxis:X轴数据,可以写死,可以加载自json

加载代码:以json形式返回该map,该map的key必须与初始化图表的相对应

Map<String,Object> map = new HashMap<String,Object>();
map.put("intervals",new String[]{"7天","15天"});
map.put("counts",new int[]{5,10});‘
    return map;

[{"intervals":["7天","15天"]},{}]

柱状图统计页面

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<script src="../js/echarts.min.js"></script>

<%--为echarts准备基本的DOM--%>
<div id="main" style="width: 600px;height:400px;" align="center"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById(‘main‘));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ‘App活跃用户‘
        },
        tooltip: {},
        legend: {
            data: [‘活跃用户‘]
        },
        xAxis: {
            data: ["7天", "15天", "30天", "90天", "半年", "一年"]
        },
        yAxis: {},
        series: [{
            name: ‘活跃用户‘,
            type: ‘bar‘,   <!-- bar柱状图 -->
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

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

    // 异步加载统计信息
    $.post("${pageContext.request.contextPath }/statistics/activeUser", function (data) {
        //console.log(data);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            series: [{
                // 根据名字对应到相应的系列
                name: ‘活跃用户‘,
                data: data.data
            }]
        });
    }, "json");
</script>

效果图:
技术分享图片

用户所在地分布图,地图需要引入china.js文件,由于争论 echarts不再提供地图数据

可以从网盘获取:https://pan.baidu.com/s/12vClAb7S0Xhw45SqDx12ug

<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart2 = echarts.init(document.getElementById(‘main2‘));

    option2 = {
        title: {
            text: ‘用户分布图‘,
            subtext: ‘2018年12月25统计‘,
            left: ‘center‘
        },
        tooltip: {
            trigger: ‘item‘
        },
        legend: {
            orient: ‘vertical‘,
            left: ‘left‘,
            data: [‘男‘, ‘女‘]
        },
        visualMap: {
            min: 0,
            max: 2500,
            left: ‘left‘,
            top: ‘bottom‘,
            text: [‘高‘, ‘低‘],           // 文本,默认为数值文本
            calculable: true
        },
        toolbox: {
            show: true,
            orient: ‘vertical‘,
            left: ‘right‘,
            top: ‘center‘,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                name: ‘男‘,
                type: ‘map‘,
                mapType: ‘china‘,
                roam: false,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: []
            },
            {
                name: ‘女‘,
                type: ‘map‘,
                mapType: ‘china‘,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: []
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);

    /*$.post("{pageContext.request.contextPath }/statistics/distribution", function (data) {
        console.log(data);
        myChart2.setOption({
            series: [{
                // 根据名字对应到相应的系列
                name: ‘用户‘,
                data: data.data
            }]
        });
    }, "json");*/


    $.post("${pageContext.request.contextPath}/statistics/distribution2", function (data) {
        console.log(data);
        myChart2.setOption({
            series: [{
                // 根据名字对应到相应的系列
                name: ‘男‘,
                data: data.data
            }]
        });
    }, "json");

    $.post("${pageContext.request.contextPath}/statistics/distribution3", function (data2) {
        console.log(data2);
        myChart2.setOption({
            series: [{
                // 根据名字对应到相应的系列
                name: ‘女‘,
                data: data2.data
            }]
        });
    }, "json");

</script>

效果图:

技术分享图片


以上是关于echarts的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

小程序里echarts画的饼图在安卓手机上效果不正常?

地图(用ECharts绘制)

Echarts基本图表的学习笔记

32-Vue之ECharts-雷达图

31-Vue之ECharts-饼图

ECharts的基本使用