Echarts实例

最新推荐文章于 2024-06-20 09:30:03 发布
最新推荐文章于 2024-06-20 09:30:03 发布
阅读量6.1k 收藏 7
点赞数
分类专栏： 数据可视化 个人成长 技术点 文章标签： Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1031893936/article/details/80869351
版权

Echarts数据可视化

效果图（前段框架为：EasyUI）：





一、饼图

（1）服务端传输到前段的数据格式为List<Map>，数据如下

[
	{name: "儿童食品", y: 4540.5}, 
	{name: "调味品", y: 1266}, 
	{name: "水果", y: 2200}
]


（2）Html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>销售额统计</title>
    <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
    <script type="text/javascript" src="ui/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="ui/echarts.js"></script>
    <script type="text/javascript" src="js/report.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'center',title:'销售统计表'" style="padding:4px;background-color:#eee">
    <form id="searchForm">
        开始日期：<input name="startDate" class="easyui-datebox">
        截止日期：<input name="endDate" class="easyui-datebox">
        <button type="button" id="btnSearch">查询</button>
    </form>
    <div style="height: 2px"></div>
    <table id="grid"></table>
</div>
<div data-options="region:'east',title:'销售统计图',split:true" style="width:900px;">
    <div id="charts" style="min-width: 450px; height: 500px; max-width: 800px; margin: 20px auto"></div>
</div>
</body>
</html>


（3）js代码

$(function () {
    $('#grid').datagrid({
        url: 'report_ordersReport',
        columns: [[
            {field: 'name', title: '商品类型', width: 300},
            {field: 'y', title: '销售额', width: 300},
        ]],
        singleSelect: true,
        onLoadSuccess:function (data) {
            // alert(JSON.stringify(data.rows));
            showChart(data.rows);
        }
    });

    //点击查询按钮
    $('#btnSearch').bind('click', function () {
        //把表单数据转换成json对象
        var formData = $('#searchForm').serializeJSON();
        if (formData.endDate != '') {
            formData.endDate += '23:59:59';
        }

        $('#grid').datagrid('load', formData);
    });
});

function showChart(data) {
        var myChart = echarts.init(document.getElementById("charts"));
        //生成图表数据
        myChart.setOption({
            //标题属性
            title : {
                text: '销售统计图',
                x:'center'
            },
            //提示框属性
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //保存图片到本地
            toolbox: {
                feature: {
                    dataView : {show: true, readOnly: false},
                    saveAsImage: {}
                },
                right:50,
                top:50
            },
            //图例属性
            legend: {
                orient: 'vertical',
                // 图例距离左方距离
                left: 50,
                // 图例距离上方距离
                top: 50,
                //设置图例值
                data: (function(){
                    var res = [];
                    for(var i=0;i<data.length;i++){
                        res.push(data[i].name);
                    }
                    return res;
                })()
            },
            //数据
            series : [
                {
                    name: '商品类型',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    //单击时，弹出该商品类型区域
                    selectedMode: 'single',
                    //显示的提示框
                    label: {
                        normal: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    // 设置数据
                    data:function(){
                        var res = [];
                        for(var i=0;i<data.length;i++){
                            res.push({
                                name:data[i].name,
                                value:data[i].y
                            });
                        }
                        return res;
                    }()

                },
            ],itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        });

}



二、折线图

（1）服务端传输到前段的数据格式为List<Map>，数据如下

[
	{"name":"1月","y":0},
	{"name":"2月","y":0},
	{"name":"3月","y":0},
	{"name":"4月","y":0},
	{"name":"5月","y":0},
	{"name":"6月","y":8006.5},
	{"name":"7月","y":0},
	{"name":"8月","y":0},
	{"name":"9月","y":0},
	{"name":"10月","y":0},
	{"name":"11月","y":0}
	,{"name":"12月","y":0}
]


（2）Html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>销售趋势表</title>
    <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
    <script type="text/javascript" src="ui/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="ui/echarts.js"></script>
    <script type="text/javascript" src="js/report_trend.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'center',title:'销售统计表'" style="padding:4px;background-color:#eee">
    <form id="searchForm">
        选择年份：<input name="year" type="text">
        <button type="button" id="btnSearch">查询</button>
    </form>
    <div style="height: 2px"></div>
    <table id="grid"></table>
</div>
<div data-options="region:'east',title:'销售统计图',split:true" style="width:1200px;">
    <div id="charts" style="min-width: 450px; height: 500px; max-width: 1200px; margin: 20px auto"></div>
</div>
</body>
</html>

（3）js代码

$(function () {
    $('#grid').datagrid({
        url: 'report_trendReport',
        columns: [[
            {field: 'name', title: '月份', width: 200},
            {field: 'y', title: '销售额', width: 200},
        ]],
        singleSelect: true,
        onLoadSuccess:function (data) {
            //alert(JSON.stringify(data.rows));
            showChart(data.rows);
        }
    });

    //点击查询按钮
    $('#btnSearch').bind('click', function () {
        //把表单数据转换成json对象
        var formData = $('#searchForm').serializeJSON();
        $('#grid').datagrid('load', formData);
    });

});

function showChart(data) {
    var myChart = echarts.init(document.getElementById("charts"));
    //生成图表数据
    myChart.setOption({
        //标题属性
        title : {
            text: '销售趋势分析',
            x:'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage: {}
            },
            right:50,
        },
        xAxis: {
            type: 'category',
            data: (function () {
                var res = [];
                for(var i=0;i<data.length;i++) {
                    res.push(data[i].name);
                }
                return res;
            })()
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: function () {
                var res = [];
                for(var i=0;i<data.length;i++) {
                    res.push(data[i].y);
                }
                return res;
            }(),
            type: 'line',
            label: {
                normal: {
                    position: 'top',
                    show: true
                }
            },
        }]
    });

}




imxushuai
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 实例
qq_43343499的博客
10-29 1932
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
Echarts实例网址
weixin_49315886的博客
03-20 152
echarts基础及复杂实例和deom大全
Echarts各类图表常用配置项说明，附示例代码
最新发布
共同学习，共同成长
06-20 1491
​大家好，我是前端菜鸟的自我修养！今天给大家分享【Echarts各类图表常用配置项说明 】，并提供具体代码帮助大家深入理解，彻底掌握！
清除echarts实例
LFQP_的博客
02-14 911
清除echarts实例
react—echarts实例
halations的博客
04-18 1203
先模拟定义后端数据 conststatistics =[{"hour":"00","click_num":2208,"submit_num":921,"device_num":31},{"hour":"01","click_num":1957,"submit_num":805,"device_num":28},{"hour":"02","click_num":113,"submit_nu...
清除echarts 实例
热门推荐
jiang_mingyi的博客
07-21 1万+
clear只是清除画布，而不会清除实例。其会保留点击事件等。 想在同一个dom中画多个实例，肯定需要先销毁前一个，才能画后一个。echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例 var myEcharts = echarts.init(document.getElementById('echarts'));//
echarts echarts实例的属性和方法
weixin_43294560的博客
08-03 1300
1.获取容器相关 echartsInstance.getWidth() echartsInstance.getHeight() echartsInstance.getDom() 获取ECharts实例容器的dom节点 2.获取当前配置 echartsInstance.getOption() 3.图表自适应改变 echartsInstance. resize({ 配置项都是可传 width: number|string, height: number|string,
初始化echarts实例
weixin_44541162的博客
06-18 6512
（作者：苦行者；撰写时间：2019年6月15日） 1、在此之前首先要引入一下Echarts插件。 2、html部分如下。 在这里要实例化的图例有三种，分别是饼状图、柱状图和折线图，给它们固定的宽度和高度； 3、js部分。 3.1初始化实例; 基于准备好的dom，通过echarts.init(document.getElementById(“id名称”))的方法初始化实例; 3.2、设置图表的配...
iframe中echarts_ECharts 实例 | JShare
weixin_28197941的博客
02-23 387
ECharts 实例 | JSharevar myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺...
Echarts入门实例
m0_61104769的博客
07-29 691
本文介绍了Echarts的入门案例，以及在传智健康项目中对Echarts的使用
对于Echarts实例化与销毁的一些运用
vvv3171071的博客
12-24 5065
本篇文章比较浅显，主要写给想要快速直接上手数据可视化带Echarts图表项目的新人们。 1、实例化图表：setOption(Object option) Object类型的参数 option，表示图表数据结构 ，形如： var option = { title: { text: "我的第一个ECharts图表示例" }, tooltip: {
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts实例-实时显示疫情.zip
09-01
通过这个ECharts实例，初学者可以了解到数据可视化的基础流程，包括如何设置ECharts图表、加载和处理数据、自定义样式以及实现动态更新。同时，这也是一个很好的实践项目，可以帮助学习者巩固JavaScript、HTML、CSS...
gcc-c++离线安装以及Redis安装
Bbb的博客
05-21 1万+
原文链接：https://www.imxushuai.com/2018/05/20/redis%E5%AE%89%E8%A3%85%E4%BB%A5%E5%8F%8A%E9%85%8D%E7%BD%AE%E8%AF%A6%E8%A7%A3/ gcc-c++离线安装以及Redis安装 一、准备Redis安装需要的gcc环境的rpm文件以及redis的压缩包 你可以去http://r...
阿里大于（短信发送平台）
Bbb的博客
07-24 8955
阿里大于     阿里大于 介绍          阿里大于是阿里云旗下产品，融合了三大运营商的通信能力，通过将传统通信业务和能力与互联网相结合，创新融合阿里巴巴生态内容，全力为中小企业和开发者提供优质服务阿里大于提供包括短信、语音、流量直充、私密专线、店铺手机号等个性化服务。通过阿里大于打通三大运营商通信能力，全面融合阿里巴巴生态，以开放API及SDK的方式向开发者提供通信和数据服务，...
FastDFS文件系统（java客户端使用）
Bbb的博客
05-14 6351
FastDFS文件系统（java客户端使用）一、导包（注意：maven中央仓库并没有这个依赖，需要自行寻找资源并安装到本地maven仓库,才能正常使用下方的依赖）&lt;!--FastDFS--&gt; &lt;dependency&gt; &lt;groupId&gt;fastdfs_client&lt;/groupId&gt; &lt;artifactId&gt;fastdfs_cli...
vue清除echarts实例
06-06
在Vue中清除ECharts实例，可以通过以下步骤实现： 1. 在Vue组件的生命周期钩子函数中，创建ECharts实例并渲染图表。 2. 在组件销毁前，调用ECharts实例的`dispose`方法，清除实例并释放内存。 以下是示例代码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值