Echarts使用心得总结（二）

最新推荐文章于 2024-08-13 18:13:57 发布
最新推荐文章于 2024-08-13 18:13:57 发布
阅读量10w+ 收藏 134
点赞数 31
分类专栏： 前台渲染模版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuemoyao/article/details/22602837
版权

Echarts使用心得总结（二）

前言：

前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的Echart版本已经发布，之前讲的很多文件都可以删除了，下边会一一给大家细讲。

为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点点给大家讲解清楚。

1.  EChart最新的文档目录。

首先创建一个解决方案，目录如下：

 

之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：

l  Echarts-map.js :主要用来渲染跟地图相关

l  Echarts.js :基本的常规图形相关

l  Esl.js :图像引擎

Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。

2.  抽象之后的Echarts。

根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：

Var ECharts={

ChartConfig:function(container,option){ …..},//加载Echarts配置文件

ChartDataFormate:{….},//数据格式化

ChartOptionTemplates:{….},//初始化常用的图表类型

Charts:{ RenderChart:function(option){….},//渲染图表

RenderMap:function(option){…}//渲染地图

}

}；

　　

2.1 Echarts配置文件的引入

在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：

ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置

        var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径

        var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径

        require.config({//引入常用的图表类型的配置

            paths: {

                echarts: chart_path,

                'echarts/chart/bar': chart_path,

                'echarts/chart/pie': chart_path,

                'echarts/chart/line': chart_path,

                'echarts/chart/k': chart_path,

                'echarts/chart/scatter': chart_path,

                'echarts/chart/radar': chart_path,

                'echarts/chart/chord': chart_path,

                'echarts/chart/force': chart_path,

                'echarts/chart/map': map_path

            }

        });

        this.option = { chart: {}, option: option, container: container };

        return this.option;

    }

　　

2.2 数据格式化

为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:

       Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]

       Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]

具体的代码实现如下：

ChartDataFormate: {

        FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源

            var categories = [];

            var datas = [];

            for (var i = 0; i < data.length; i++) {

                categories.push(data[i].name || "");

                datas.push({ name: data[i].name, value: data[i].value || 0 });

            }

            return { category: categories, data: datas };

        },

        FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图

            var chart_type = 'line';

            if (type)

                chart_type = type || 'line';

            var xAxis = [];

            var group = [];

            var series = [];

            for (var i = 0; i < data.length; i++) {

                for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);

                if (j == xAxis.length)

                    xAxis.push(data[i].name);

                for (var k = 0; k < group.length && group[k] != data[i].group; k++);

                if (k == group.length)

                    group.push(data[i].group);

            }

 

            for (var i = 0; i < group.length; i++) {

                var temp = [];

                for (var j = 0; j < data.length; j++) {

                    if (group[i] == data[j].group) {

                        if (type == "map")

                            temp.push({ name: data[j].name, value: data[i].value });

                        else

                            temp.push(data[j].value);

                    }

                }

                switch (type) {

                    case 'bar':

                        var series_temp = { name: group[i], data: temp, type: chart_type };

                        if (is_stack)

                            series_temp = $.extend({}, { stack: 'stack' }, series_temp);

                        break;

                    case 'map':

                        var series_temp = {

                            name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',

                            itemStyle: {

                                normal: { label: { show: true} },

                                emphasis: { label: { show: true} }

                            },

                            data: temp

                        };

                        break;

                    case 'line':

                        var series_temp = { name: group[i], data: temp, type: chart_type };

                        if (is_stack)

                            series_temp = $.extend({}, { stack: 'stack' }, series_temp);

                        break;

                    default:

                        var series_temp = { name: group[i], data: temp, type: chart_type };

                }

                series.push(series_temp);

            }

            return { category: group, xAxis: xAxis, series: series };

        },

　　

　　

2.3 各种图表类型的配置初始化

在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：

ChartOptionTemplates: {

        CommonOption: {//通用的图表基本配置

            tooltip: {

                trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发

            },

            toolbox: {

                show: true, //是否显示工具栏

                feature: {

                    mark: true,

                    dataView: { readOnly: false }, //数据预览

                    restore: true, //复原

                    saveAsImage: true //是否保存图片

                }

            }

        },

        CommonLineOption: {//通用的折线图表的基本配置

            tooltip: {

                trigger: 'axis'

            },

            toolbox: {

                show: true,

                feature: {

                    dataView: { readOnly: false }, //数据预览

                    restore: true, //复原

                    saveAsImage: true, //是否保存图片

                    magicType: ['line', 'bar']//支持柱形图和折线图的切换

                }

            }

        },

        Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...

            var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);

            var option = {

                tooltip: {

                    trigger: 'item',

                    formatter: '{b} : {c} ({d}/%)',

                    show: true

                },

                legend: {

                    orient: 'vertical',

                    x: 'left',

                    data: pie_datas.category

                },

                series: [

                    {

                        name: name || "",

                        type: 'pie',

                        radius: '65%',

                        center: ['50%', '50%'],

                        data: pie_datas.data

                    }

                ]

            };

            return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);

        },

Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...

            var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);

            var option = {

                legend: {

                    data: stackline_datas.category

                },

                xAxis: [{

                    type: 'category', //X轴均为category，Y轴均为value

                    data: stackline_datas.xAxis,

                    boundaryGap: false//数值轴两端的空白策略

                }],

                yAxis: [{

                    name: name || '',

                    type: 'value',

                    splitArea: { show: true }

                }],

                series: stackline_datas.series

            };

            return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);

        },

Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...

            var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);

            var option = {

                legend: bars_dates.category,

                xAxis: [{

                    type: 'category',

                    data: bars_dates.xAxis,

                    axisLabel: {

                        show: true,

                        interval: 'auto',

                        rotate: 0,

                        margion: 8

                    }

                }],

                yAxis: [{

                    type: 'value',

                    name: name || '',

                    splitArea: { show: true }

                }],

                series: bars_dates.series

            };

            return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);

        },

  ……..//其他的图表配置，如柱图+折线、地图

……..

 

}

　　

　　

 

2.4 图形的渲染

在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：

Charts: {

        RenderChart: function (option) {

            require([

                'echarts',

                'echarts/chart/line',

                'echarts/chart/bar',

                'echarts/chart/pie',

                'echarts/chart/k',

                'echarts/chart/scatter',

                'echarts/chart/radar',

                'echarts/chart/chord',

                'echarts/chart/force',

                'echarts/chart/map'

              ],

              function (ec) {

                  echarts = ec;

                  if (option.chart && option.chart.dispose)

                      option.chart.dispose();

                  option.chart = echarts.init(option.container);

                  window.onresize = option.chart.resize;

                  option.chart.setOption(option.option, true);

              });

        },

        ……..//渲染其他的图表类型，如：地图

        ……..

        }

　　

3.  具体页面的使用

经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：

    

    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

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

    <script src="/Statics/ECharts.js" type="text/javascript"></script>

　　

引入之后就可进行使用了，下面演示几个常用的图表的使用：

首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：

<div id="echart" style="width:100%; height:400px;"></div>

 

3.1 饼图

3.1.1 实现代码
<script type="text/javascript">

    $(

      function () {

          var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];

          var option = ECharts.ChartOptionTemplates.Pie(data);

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

    );

</script>

　　

 

3.1.2 展示效果

 

3.2 柱图

3.2.1 实现代码
<script type="text/javascript">

    $(

      function () {

          var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];

          var option = ECharts.ChartOptionTemplates.Bar(data);

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

);

$(

      function () {

          var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];

          var option = ECharts.ChartOptionTemplates.Bars(data,'Love');

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

 

          var option = ECharts.ChartOptionTemplates.Bars(data, 'Love', true);

          var container = $("#echart1")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

    );

 

</script>

　　

3.2.2展示效果

 

 

3.3 折线图

3.3.1 实现代码
<script type="text/javascript">

        $(function () {

            var data = [

            { name: '2013-01', group: 'olive', value: 116 },

            { name: '2013-01', group: 'momo', value: 115 },

            { name: '2013-01', group: 'only', value: 222 },

            { name: '2013-01', group: 'for', value: 324 },

            { name: '2013-02', group: 'olive', value: 156 },

            { name: '2013-02', group: 'momo', value: 185 },

            { name: '2013-02', group: 'only', value: 202 },

            { name: '2013-02', group: 'for', value: 34 },

            { name: '2013-03', group: 'olive', value: 16 },

            { name: '2013-03', group: 'momo', value: 51 },

            { name: '2013-03', group: 'only', value: 22 },

            { name: '2013-03', group: 'for', value: 84 }

            ];

            var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', "折线图示例");

            var container = $("#container");

            HighChart.RenderChart(opt, container);

        });

       $(

      function () {

          var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];

          var option = ECharts.ChartOptionTemplates.Lines(data,'lines',false);

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

 

          var option = ECharts.ChartOptionTemplates.Lines(data, 'lines', true);

          var container = $("#echart1")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

    );

 

    </script>

　　

3.3.2展示效果

 

 

3.4 柱图+折线（增幅）图

3.4.1 展示效果

 

3.5 地图

3.5.3 展示效果

 

到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。

墨遥
关注
专栏目录
ECharts使用心得总结
whiteosk的博客
09-27 1万+
七月份因为做微信管理平台第一次接触到ECharts，对于刚入行的菜鸟见到如此生动直观的图表十分兴奋，原来图表可以这么漂亮和生动。做项目相应的图表时就想写个博客总结，一直没写拖到现在，挺多都不记得可能有些纰漏还望各位踩点的多多指导指正。 项目中的图表形式很多，基本可以在ECharts中找到相应实例，但UI设计图中的图表跟百度ECharts原型实例多少有些出入。 以下是项目中UI设计稿中的图表
echarts使用心得总结
weixin_38743171的博客
01-16 1343
1.简单介绍 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts由百度出品，简单好用易上手，属性丰富，函数可自定义，图形好看。 公司新项目需要在系统首页展示系统的运行概况，要求使用图形展示，于是开始接
Echarts使用心得
偷得浮生半日闲
04-08 2267
前言 Echarts是一个 JavaScript 的开源可视化图表库，可以快速画出许多图形，我们有时候会用到它，但是官方教程对于新手来说确实不友好，至少在我看来是这样的，看了我几天才大概有所了解，为了加深记忆，故在此记下，方便日后忘记可以回来查看 文章目录前言一、基础画图二、配置项setOption1、title2、legend3、grid4、xAxis 一、基础画图 基础画一个图，首先要知道的是重点在于配置项setOption,现在先不急了解，我们先简单画一个图 1、在页面创建一个div标签，id值未
ECharts 数据可视化 入门基本知识 下载安装常用的图表 【1】
最新发布
weixin_43483590的博客
08-13 2720
ECharts一个基于 JavaScript 的开源可视化图表库，即将数据以图形或图像的方式展现成在屏幕上显示出来，这种方式称为数据可视化。数据可视化有助于我们分析数据，帮助我们更深入更直观的理解数据
echarts 学习心得
dwc2011的专栏
12-20 1551
最近项目组开始用 echarts 做图表，学习要点和其他框架一样：一如既往地看 API，哈哈~~。闲来无事，还是做一个小结吧。 一、echarts 基本的应用 1. echarts 文件引入： echarts 文件的引入方式有两种。模块化单文件引入、标签式单文件引入。之所以为什么有这两种引入方式，鄙人在 dist 路径下看了下两个文件的大小，模块化引入的 echarts.js 是 300+K
echarts学习使用心得
Tinychuan
11-05 2735
    echarts是一个前端图表的框架。是比较容易上手（我本来是专做后台，由于公司组织架构问题，才开始接触前端）并且适用面广（图表类型非常丰富）也非常实用（很多网站都有使用到）的框架。     基本的使用流程在网上有很多很多的文章了，在这里我主要就是分享一下我自己在使用过程中碰到的一些问题和解决方法。     首先，用的最多的一般还是折线图，柱状图和饼图。     在我用到折线图的时候，...
ECharts使用心得
08-02
### ECharts使用心得详解 #### 一、简介 ECharts是一款由百度开发的纯JavaScript的图表库，提供了直观、生动、可交互、可高度个性化定制的数据可视化图表。它支持常规的折线图、柱状图、饼图、散点图等，同时也...
ECharts使用心得(echart map)
02-06
ECharts使用心得 上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。
echarts使用心得
qq_44253836的博客
07-25 214
echarts使用心得
echarts-config:规范标准echarts初始化配置使用，让业务和公司的charts组件统一标准和色阶
05-24
echarts-config 规范标准echarts初始化配置使用，让业务和公司的charts组件统一标准和色阶 安装 npm install echarts-config --save-dev 使用 //初始化主题色系默认是light浅色系 light|dark window._CHART_THEMETYPE_ = 'dark' import { //传入chart借基础类型和要设置的对象 chartMerge, //添加业务通用图表或者初始化覆盖业务组件 insertChartConfig, //重置theme色系改变成自己业务所需要的色系 resetColorConfig } from 'echarts-config'; 具体实例在页面直接饮用参考demo使用
EChart使用心得（一）
qq_37320586的博客
02-20 614
1,创建一个简单的demo实例。     var myChart =  echarts.init(document.querySelector("#main"));          //制定配置图表的配置项和数据         var option = {             title:{             text: "firstDemo",             },    
ECharts的使用
weixin_30432179的博客
07-17 214
1. 插件的下载 以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要 ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也 要下载ZRender。 ECharts下载地址： http://echarts.ba...
echarts需求总结
ll_883963的博客
12-28 1246
关于tooltipd 提示文字的使用. 单条提示 tooltip: { trigger: "axis",//触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据， backgroundColor: "#fff",//背景 borderWidth: "1", //边框.
Echarts配置
Q010_的博客
07-02 203
echart小结
x_1213的博客
12-01 748
来了来了,小编又来做总结了，今天学了echart，首先我们要知道echart是一个数据可视化图表库 HeightCharts，D3是echart的同行，但是小编今天只学了echart，所以今天只能总结一下echart了。 核心概念 instance实例 serues系列 tooltip提示 legend图例 xAxis x轴 yAxis y轴 toolbox 工具箱 daraZoom 缩放 vitualMap 虚拟映射 在讲这些之前我们先来了解一下在html里要怎么使用echart
Echarts报错[MODULE_MISS]"echarts/config" is not exists!
weixin_30650859的博客
01-27 284
项目用到Echarts插件，时下比较流行的是模块化包引入，但是很悲催的是楼主用的是标签式引入，所以从官网copy来的代码总是报一个 [MODULE_MISS]"echarts/config的错误，在这里，楼主对模块化包引入并没有学习，所以此文只是提醒那些项目用了标签式引入的同学们 啰嗦一句，所谓标签式引入就是用js的标签引入在html页面中导入js文件 形如 ： ...
ECharts使用教程：地图控件与心得分享
"详解ECharts使用心得总结" ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图以及地图等，且支持在各种浏览器和操作系统上运行。在本文中，我们...
评论 128
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值