hdchenyue
hdchenyue

Echart使用心得

1.  EChart最新的文档目录。

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

 Echart使用心得_第1张图片

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

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

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

l  Esl.js :图像引擎

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

2.  抽象之后的Echarts。

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

[javascript]  view plain  copy
  1. Var ECharts={  
  2.   
  3. ChartConfig:function(container,option){ …..},//加载Echarts配置文件  
  4.   
  5. ChartDataFormate:{….},//数据格式化  
  6.   
  7. ChartOptionTemplates:{….},//初始化常用的图表类型  
  8.   
  9. Charts:{ RenderChart:function(option){….},//渲染图表  
  10.   
  11. RenderMap:function(option){…}//渲染地图  
  12.   
  13. }  
  14.   
  15. }；  

　　

2.1 Echarts配置文件的引入

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

[javascript]  view plain  copy
  1. ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置  
  2.   
  3.         var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径  
  4.   
  5.         var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径  
  6.   
  7.         require.config({//引入常用的图表类型的配置  
  8.   
  9.             paths: {  
  10.   
  11.                 echarts: chart_path,  
  12.   
  13.                 'echarts/chart/bar': chart_path,  
  14.   
  15.                 'echarts/chart/pie': chart_path,  
  16.   
  17.                 'echarts/chart/line': chart_path,  
  18.   
  19.                 'echarts/chart/k': chart_path,  
  20.   
  21.                 'echarts/chart/scatter': chart_path,  
  22.   
  23.                 'echarts/chart/radar': chart_path,  
  24.   
  25.                 'echarts/chart/chord': chart_path,  
  26.   
  27.                 'echarts/chart/force': chart_path,  
  28.   
  29.                 'echarts/chart/map': map_path  
  30.   
  31.             }  
  32.   
  33.         });  
  34.   
  35.         this.option = { chart: {}, option: option, container: container };  
  36.   
  37.         return this.option;  
  38.   
  39.     }  
  40.   
  41.    

　　

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]

具体的代码实现如下：

[javascript]  view plain  copy
  1. ChartDataFormate: {  
  2.   
  3.         FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源  
  4.   
  5.             var categories = [];  
  6.   
  7.             var datas = [];  
  8.   
  9.             for (var i = 0; i < data.length; i++) {  
  10.   
  11.                 categories.push(data[i].name || "");  
  12.   
  13.                 datas.push({ name: data[i].name, value: data[i].value || 0 });  
  14.   
  15.             }  
  16.   
  17.             return { category: categories, data: datas };  
  18.   
  19.         },  
  20.   
  21.         FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图  
  22.   
  23.             var chart_type = 'line';  
  24.   
  25.             if (type)  
  26.   
  27.                 chart_type = type || 'line';  
  28.   
  29.             var xAxis = [];  
  30.   
  31.             var group = [];  
  32.   
  33.             var series = [];  
  34.   
  35.             for (var i = 0; i < data.length; i++) {  
  36.   
  37.                 for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);  
  38.   
  39.                 if (j == xAxis.length)  
  40.   
  41.                     xAxis.push(data[i].name);  
  42.   
  43.                 for (var k = 0; k < group.length && group[k] != data[i].group; k++);  
  44.   
  45.                 if (k == group.length)  
  46.   
  47.                     group.push(data[i].group);  
  48.   
  49.             }  
  50.   
  51.    
  52.   
  53.             for (var i = 0; i < group.length; i++) {  
  54.   
  55.                 var temp = [];  
  56.   
  57.                 for (var j = 0; j < data.length; j++) {  
  58.   
  59.                     if (group[i] == data[j].group) {  
  60.   
  61.                         if (type == "map")  
  62.   
  63.                             temp.push({ name: data[j].name, value: data[i].value });  
  64.   
  65.                         else  
  66.   
  67.                             temp.push(data[j].value);  
  68.   
  69.                     }  
  70.   
  71.                 }  
  72.   
  73.                 switch (type) {  
  74.   
  75.                     case 'bar':  
  76.   
  77.                         var series_temp = { name: group[i], data: temp, type: chart_type };  
  78.   
  79.                         if (is_stack)  
  80.   
  81.                             series_temp = $.extend({}, { stack: 'stack' }, series_temp);  
  82.   
  83.                         break;  
  84.   
  85.                     case 'map':  
  86.   
  87.                         var series_temp = {  
  88.   
  89.                             name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',  
  90.   
  91.                             itemStyle: {  
  92.   
  93.                                 normal: { label: { show: true} },  
  94.   
  95.                                 emphasis: { label: { show: true} }  
  96.   
  97.                             },  
  98.   
  99.                             data: temp  
  100.   
  101.                         };  
  102.   
  103.                         break;  
  104.   
  105.                     case 'line':  
  106.   
  107.                         var series_temp = { name: group[i], data: temp, type: chart_type };  
  108.   
  109.                         if (is_stack)  
  110.   
  111.                             series_temp = $.extend({}, { stack: 'stack' }, series_temp);  
  112.   
  113.                         break;  
  114.   
  115.                     default:  
  116.   
  117.                         var series_temp = { name: group[i], data: temp, type: chart_type };  
  118.   
  119.                 }  
  120.   
  121.                 series.push(series_temp);  
  122.   
  123.             }  
  124.   
  125.             return { category: group, xAxis: xAxis, series: series };  
  126.   
  127.         },  

　　

[javascript]  view plain  copy
  1.   

　　

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

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

[javascript]  view plain  copy
  1. ChartOptionTemplates: {  
  2.   
  3.         CommonOption: {//通用的图表基本配置  
  4.   
  5.             tooltip: {  
  6.   
  7.                 trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发  
  8.   
  9.             },  
  10.   
  11.             toolbox: {  
  12.   
  13.                 show: true, //是否显示工具栏  
  14.   
  15.                 feature: {  
  16.   
  17.                     mark: true,  
  18.   
  19.                     dataView: { readOnly: false }, //数据预览  
  20.   
  21.                     restore: true, //复原  
  22.   
  23.                     saveAsImage: true //是否保存图片  
  24.   
  25.                 }  
  26.   
  27.             }  
  28.   
  29.         },  
  30.   
  31.         CommonLineOption: {//通用的折线图表的基本配置  
  32.   
  33.             tooltip: {  
  34.   
  35.                 trigger: 'axis'  
  36.   
  37.             },  
  38.   
  39.             toolbox: {  
  40.   
  41.                 show: true,  
  42.   
  43.                 feature: {  
  44.   
  45.                     dataView: { readOnly: false }, //数据预览  
  46.   
  47.                     restore: true, //复原  
  48.   
  49.                     saveAsImage: true, //是否保存图片  
  50.   
  51.                     magicType: ['line', 'bar']//支持柱形图和折线图的切换  
  52.   
  53.                 }  
  54.   
  55.             }  
  56.   
  57.         },  
  58.   
  59.         Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...  
  60.   
  61.             var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);  
  62.   
  63.             var option = {  
  64.   
  65.                 tooltip: {  
  66.   
  67.                     trigger: 'item',  
  68.   
  69.                     formatter: '{b} : {c} ({d}/%)',  
  70.   
  71.                     show: true  
  72.   
  73.                 },  
  74.   
  75.                 legend: {  
  76.   
  77.                     orient: 'vertical',  
  78.   
  79.                     x: 'left',  
  80.   
  81.                     data: pie_datas.category  
  82.   
  83.                 },  
  84.   
  85.                 series: [  
  86.   
  87.                     {  
  88.   
  89.                         name: name || "",  
  90.   
  91.                         type: 'pie',  
  92.   
  93.                         radius: '65%',  
  94.   
  95.                         center: ['50%', '50%'],  
  96.   
  97.                         data: pie_datas.data  
  98.   
  99.                     }  
  100.   
  101.                 ]  
  102.   
  103.             };  
  104.   
  105.             return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);  
  106.   
  107.         },  
  108.   
  109. Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...  
  110.   
  111.             var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);  
  112.   
  113.             var option = {  
  114.   
  115.                 legend: {  
  116.   
  117.                     data: stackline_datas.category  
  118.   
  119.                 },  
  120.   
  121.                 xAxis: [{  
  122.   
  123.                     type: 'category', //X轴均为category，Y轴均为value  
  124.   
  125.                     data: stackline_datas.xAxis,  
  126.   
  127.                     boundaryGap: false//数值轴两端的空白策略  
  128.   
  129.                 }],  
  130.   
  131.                 yAxis: [{  
  132.   
  133.                     name: name || '',  
  134.   
  135.                     type: 'value',  
  136.   
  137.                     splitArea: { show: true }  
  138.   
  139.                 }],  
  140.   
  141.                 series: stackline_datas.series  
  142.   
  143.             };  
  144.   
  145.             return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);  
  146.   
  147.         },  
  148.   
  149. Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...  
  150.   
  151.             var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);  
  152.   
  153.             var option = {  
  154.   
  155.                 legend: bars_dates.category,  
  156.   
  157.                 xAxis: [{  
  158.   
  159.                     type: 'category',  
  160.   
  161.                     data: bars_dates.xAxis,  
  162.   
  163.                     axisLabel: {  
  164.   
  165.                         show: true,  
  166.   
  167.                         interval: 'auto',  
  168.   
  169.                         rotate: 0,  
  170.   
  171.                         margion: 8  
  172.   
  173.                     }  
  174.   
  175.                 }],  
  176.   
  177.                 yAxis: [{  
  178.   
  179.                     type: 'value',  
  180.   
  181.                     name: name || '',  
  182.   
  183.                     splitArea: { show: true }  
  184.   
  185.                 }],  
  186.   
  187.                 series: bars_dates.series  
  188.   
  189.             };  
  190.   
  191.             return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);  
  192.   
  193.         },  
  194.   
  195.   ……..//其他的图表配置，如柱图+折线、地图  
  196.   
  197. ……..  
  198.   
  199.    
  200.   
  201. }  

　　

　　

 

2.4 图形的渲染

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

[javascript]  view plain  copy
  1. Charts: {  
  2.   
  3.         RenderChart: function (option) {  
  4.   
  5.             require([  
  6.   
  7.                 'echarts',  
  8.   
  9.                 'echarts/chart/line',  
  10.   
  11.                 'echarts/chart/bar',  
  12.   
  13.                 'echarts/chart/pie',  
  14.   
  15.                 'echarts/chart/k',  
  16.   
  17.                 'echarts/chart/scatter',  
  18.   
  19.                 'echarts/chart/radar',  
  20.   
  21.                 'echarts/chart/chord',  
  22.   
  23.                 'echarts/chart/force',  
  24.   
  25.                 'echarts/chart/map'  
  26.   
  27.               ],  
  28.   
  29.               function (ec) {  
  30.   
  31.                   echarts = ec;  
  32.   
  33.                   if (option.chart && option.chart.dispose)  
  34.   
  35.                       option.chart.dispose();  
  36.   
  37.                   option.chart = echarts.init(option.container);  
  38.   
  39.                   window.onresize = option.chart.resize;  
  40.   
  41.                   option.chart.setOption(option.option, true);  
  42.   
  43.               });  
  44.   
  45.         },  
  46.   
  47.         ……..//渲染其他的图表类型，如：地图  
  48.   
  49.         ……..  
  50.   
  51.         }  
  52.   
  53.    

　　

3.  具体页面的使用

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

    

[javascript]  view plain  copy
  1. <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
  2.   
  3. <script src="/Statics/echarts/esl.js" type="text/javascript"></script>  
  4.   
  5. <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 实现代码

[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.   
  3.     $(  
  4.   
  5.       function () {  
  6.   
  7.           var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];  
  8.   
  9.           var option = ECharts.ChartOptionTemplates.Pie(data);  
  10.   
  11.           var container = $("#echart")[0];  
  12.   
  13.           opt = ECharts.ChartConfig(container, option);  
  14.   
  15.           ECharts.Charts.RenderChart(opt);  
  16.   
  17.       }  
  18.   
  19.     );  
  20.   
  21. </script>  

　　

 

3.1.2 展示效果

 Echart使用心得_第2张图片

3.2 柱图

3.2.1 实现代码

[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.   
  3.     $(  
  4.   
  5.       function () {  
  6.   
  7.           var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];  
  8.   
  9.           var option = ECharts.ChartOptionTemplates.Bar(data);  
  10.   
  11.           var container = $("#echart")[0];  
  12.   
  13.           opt = ECharts.ChartConfig(container, option);  
  14.   
  15.           ECharts.Charts.RenderChart(opt);  
  16.   
  17.       }  
  18.   
  19. );  
  20.   
  21. $(  
  22.   
  23.       function () {  
  24.   
  25.           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'}];  
  26.   
  27.           var option = ECharts.ChartOptionTemplates.Bars(data,'Love');  
  28.   
  29.           var container = $("#echart")[0];  
  30.   
  31.           opt = ECharts.ChartConfig(container, option);  
  32.   
  33.           ECharts.Charts.RenderChart(opt);  
  34.   
  35.    
  36.   
  37.           var option = ECharts.ChartOptionTemplates.Bars(data, 'Love', true);  
  38.   
  39.           var container = $("#echart1")[0];  
  40.   
  41.           opt = ECharts.ChartConfig(container, option);  
  42.   
  43.           ECharts.Charts.RenderChart(opt);  
  44.   
  45.       }  
  46.   
  47.     );  
  48.   
  49.    
  50.   
  51. </script>  
  52.   
  53.    

　　

3.2.2展示效果

 Echart使用心得_第3张图片

Echart使用心得_第4张图片

 

3.3 折线图

3.3.1 实现代码

[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.   
  3.         $(function () {  
  4.   
  5.             var data = [  
  6.   
  7.             { name: '2013-01', group: 'olive', value: 116 },  
  8.   
  9.             { name: '2013-01', group: 'momo', value: 115 },  
  10.   
  11.             { name: '2013-01', group: 'only', value: 222 },  
  12.   
  13.             { name: '2013-01', group: 'for', value: 324 },  
  14.   
  15.             { name: '2013-02', group: 'olive', value: 156 },  
  16.   
  17.             { name: '2013-02', group: 'momo', value: 185 },  
  18.   
  19.             { name: '2013-02', group: 'only', value: 202 },  
  20.   
  21.             { name: '2013-02', group: 'for', value: 34 },  
  22.   
  23.             { name: '2013-03', group: 'olive', value: 16 },  
  24.   
  25.             { name: '2013-03', group: 'momo', value: 51 },  
  26.   
  27.             { name: '2013-03', group: 'only', value: 22 },  
  28.   
  29.             { name: '2013-03', group: 'for', value: 84 }  
  30.   
  31.             ];  
  32.   
  33.             var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', "折线图示例");  
  34.   
  35.             var container = $("#container");  
  36.   
  37.             HighChart.RenderChart(opt, container);  
  38.   
  39.         });  
  40.   
  41.        $(  
  42.   
  43.       function () {  
  44.   
  45.           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'}];  
  46.   
  47.           var option = ECharts.ChartOptionTemplates.Lines(data,'lines',false);  
  48.   
  49.           var container = $("#echart")[0];  
  50.   
  51.           opt = ECharts.ChartConfig(container, option);  
  52.   
  53.           ECharts.Charts.RenderChart(opt);  
  54.   
  55.    
  56.   
  57.           var option = ECharts.ChartOptionTemplates.Lines(data, 'lines', true);  
  58.   
  59.           var container = $("#echart1")[0];  
  60.   
  61.           opt = ECharts.ChartConfig(container, option);  
  62.   
  63.           ECharts.Charts.RenderChart(opt);  
  64.   
  65.       }  
  66.   
  67.     );  
  68.   
  69.    
  70.   
  71.     </script>  
  72.   
  73.    

　　

3.3.2展示效果

 Echart使用心得_第5张图片

Echart使用心得_第6张图片

 

3.4 柱图+折线（增幅）图

3.4.1 展示效果

 Echart使用心得_第7张图片

3.5 地图

3.5.3 展示效果

Echart使用心得_第8张图片

 

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

你可能感兴趣的:(Echart使用心得)

  • Pyecharts数据可视化大屏：打造沉浸式数据分析体验 我的运维人生 信息可视化数据分析数据挖掘运维开发技术共享
    Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
  • pyecharts——绘制柱形图折线图 2224070247 信息可视化pythonjava数据可视化
    一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
  • 高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts信息可视化数据分析
    ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
  • 高仿一个echarts饼图 街角小林2
    开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
  • python之pyecharts制作可视化数据大屏 cesske 大数据
    文章目录前言一、安装Pyecharts二、创建Pyecharts图表三、设计大屏布局四、实时数据更新五、部署和展示总结前言使用Pyecharts制作可视化数据大屏是一个复杂但有趣的过程，因为Pyecharts本身是一个用于生成Echarts图表的Python库，而Echarts是由百度开发的一个开源可视化库，支持丰富的图表类型和高度自定义。然而，Pyecharts本身并不直接提供“大屏”的解决方案
  • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具javascript前端html
    效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
  • 基于VUE2-dataV和echarts实现的可视化大屏，百分比适配PC端 风流野趣fly echarts信息可视化前端vue.jsjavascriptvscode大数据
    可视化平台中，数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分，左侧由能耗总览、耗能占比、库存预警构成，中间由数据总览、销售计划完成率构成，右侧由销售统计、销售排名（TOP8）、生产统计构成。平台右上角动态显示当前系统日期、星期、时间，格式。在管理端进行添加数据后，数据可视化图表进行相应变化。1.能耗总览仪表盘，统计分析耗电量、耗水量、
  • 关于Echarts的一些设置总结 夏之小星星 echarts前端javascript
    最近领导让我一个偏后端程序员画各种数据展示echarts页面，遇到好多问题在此记录一下，未完待续。。。ps：不喜欢画页面啊啊啊啊啊，以前公司这些都是ui的活啊啊啊啊，折磨死我啦啊啊啊啊一、柱形图1、echarts如何设置柱形颜色渐变在option加color属性option={color:{type:'linear',//x=0,y=1,柱子的颜色在垂直方向渐变x:0,y:1,colorStops
  • echarts X轴文本太长 formatter自定义文本的显示方式 每一天，每一步 EChartsechartsjavascriptecmascript
    如果ECharts中X轴的文本太长，可以通过设置axisLabel的rotate属性来旋转标签，或者使用formatter函数来自定义文本的显示方式。另外，可以开启axisLabel的interval属性来控制显示的标签的间隔。option={tooltip:{},xAxis:{type:'category',data:['这是一段非常长的文本','短文本','另一段长文本','另一段长文本'],
  • echarts根据数量级设置最大值最小值为整百的数 每一天，每一步 EChartsecharts前端javascript
    在ECharts中，可以通过设置yAxis的min和max属性来控制y轴的最大值和最小值。代码：option={yAxis:{type:'value',min:function(value){returnvalue.min-(value.min%100);},max:function(value){returnvalue.max>0?(value.max-(value.max%100)+100):
  • echarts象形渐变柱状图 星星跌入梦境* echartsangular.js前端
    一、效果图如下：二、代码如下（1）父组件importitemfrom'../bigdata/components/item.vue'exportdefault{components:{item}}.page-con{width:100%;height:100%;.main-con{width:35%;height:33%;}}（2）子组件importechartsfrom"echarts";exp
  • 微信小程序中实现类似于 ECharts 的图表渲染及优化 人工智能的苟富贵 前端小程序微信小程序echarts小程序
    文章目录前言一、微信小程序中使用ECharts概述二、ECharts在小程序中的集成步骤2.1在小程序项目的根目录下，运行以下命令安装echarts依赖：2.2在小程序的components文件夹中创建ec-canvas组件。2.3在需要展示图表的页面中，引用ec-canvas组件，并初始化ECharts图表：三、微信小程序中使用Canvas绘制图表基础示例：绘制一个简单的折线图四、动态数据更新的
  • Echarts概述，真实 2401_84094868 程序员echarts前端javascript
    ECharts是百度开源的纯Javascript图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。2.E
  • 重磅算法：通信设备虚拟仿真-波形根据频率、带宽变化算法（Vue3+typescript）结尾附vue2+JavaScript I like Code? javascript算法typescript
    以下为Vue3+typescriptconstpointSpacing=ref(0);constupdateInterval=ref(undefined);//更新图表数据的函数constUpdateChartTest=(centerFrequnency:number,bandwidth:number,baseFreq=800,baseBW=100)=>{if(updateInterval.val
  • vue3.0+echarts 嵌套数据的饼图并有联动效果 hehe-呵呵 echartsjavascript前端
    想要实现的效果:1、默认选中外层的第一个。2、点击外层的饼图，里层的饼图实时变动。3、始终保持外层饼图有选中的状态效果如下：实现如下：1、数据结构letchartsArray=[{name:'外层1',value:2,selected:true,children:[{name:'内层1-1',value:3,},{name:'内层1-2',value:4,},{name:'内层1-3',value
  • vue+threeJS示例（001）: 不断翻转的立体箱体 还是大剑师兰特 #ThreeJS综合教程200+threejs入门threejs教程threejs示例大剑师
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示
  • 【前端echarts】echarts双饼图与easyui列表联动 时光匆匆岁月荏苒,转眼我们已不是当年 EasyUI前端echartseasyui
    echarts双饼图与easyui列表联动包括饼图与列表页联动，基本上无bugecharts双饼图与easyui列表联动-->-->$(function(){//定义参数varpieOptionDataList=[{titleText:"用户",seriesId:"user",seriesDataValue:"userRatio",seriesDataName:"userName",},{titl
  • 【echarts】使用 ECharts 绘制3D饼图 帅比九日 踩过的坑前端javascriptecharts大屏端
    使用ECharts绘制3D饼图在数据可视化中，饼图是表达数据占比信息的常见方式。ECharts作为一个强大的数据可视化库，除了标准的二维饼图，也支持更加生动的三维饼图绘制。本文将指导你如何使用ECharts来创建一个3D饼图，提升你的数据展示效果。首先了解3D饼图的构成在ECharts中，3D饼图主要是通过surface类型的图表来模拟实现的。一个surface类型的系列（series）可以定义一
  • ECharts地图-自定义26(大数据量散点图、地图飞线效果) 图表制作解说 echarts地图echarts地图大数据量散点图涟漪散点图飞线图统计分析数据可视化大屏可视化
    代码视频讲解：ECharts地图-自定义26_哔哩哔哩_bilibiliECharts地图-自定义26
  • QT chart案例 quaer QTqtswift开发语言
    examples-zoomlinechart.qdocZoomLineExample|QtCharts5.15.2Qt5.15QtChartsZoomLineExampleQtCharts|CommercialorGPLv3ContentsRunningtheExampleCustomizingZoomingEffectsZoomLineExample$$$zoomlinechart-briefT
  • 如何让echarts中title可以旋转以及在四周加上title 今晚吃什么呢？ echarts前端javascript
    需要达到的效果图如下：需要实现这种的效果我们需要用到，graphic这个Api，具体实现：1.在graphic使用elements这个属性；2.设置title需要几个title你就设置几个；3.属性解释：type设置他的类型，可以是文字也可以是其他的。left、bottom、top等是设置他的位置使用center就是居中对齐style是设置他的样式益对象的形式出显；style.tex是设置名称，s
  • 如何将dom转化为pdf Olivia小饼干 javascripthtmldom
    1.先局部打印方法一：通过id选择器来替换内容打印2.这样打印转化成PDF是调用浏览器默认的功能存在的问题就是echarts生成的canvas显示不出来这样就要到以下方法:3.htmljs打印图片不显示canvas将canvas转化成base64用img标签显示出来4.浏览器默认的打印可以转化成PDF,选中就行了
  • 鸿蒙应用开发-做一个随机转盘 阿康2024 鸿蒙应用开发harmonyos华为
    使用鸿蒙三方库mpchart可以很方便地做一个滚动转盘，可以做随机选择转盘中的任一项。实现效果如下图所示：实现代码如下：import{ColorTemplate,JArrayList,MPPointF,PieChart,PieChartModel,PieData,PieDataSet,PieEntry}from'@ohos/mpchart';importanimator,{AnimatorOpti
  • echarts给x轴添加rich各种图标 Lanwarf-前端开发 Echartsechartsjavascriptecmascript
    1.选择合适的rich图标constweatherIcons={Sunny:'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png',Showers:'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'}2.
  • Pyecharts可视化数据大屏 七夜zippoe 大数据大数据
    Pyecharts是一个非常强大的Python数据可视化库，它可以用来创建各种图表，并通过配置参数将这些图表组合成数据大屏。以下是创建一个简单的数据大屏的步骤和示例代码。1.安装pyecharts首先，你需要安装pyecharts：pipinstallpyecharts2.创建图表使用pyecharts创建多个图表，如柱状图、折线图等。下面是一些示例：frompyecharts.chartsimp
  • 拼多多抽纸群怎么加入 拼多多抽纸群怎么样怎么那么便宜 高省_飞智666600
    如果你经常在网上购物，那么你一定听说过拼多多。这个平台以低价、社交电商为特色，深受广大消费者的喜爱。而今天我们要探讨的是拼多多上的一个特色群体——拼多多抽纸群。首先，我们来解答一个问题：什么是拼多多抽纸群？简单来说，拼多多抽纸群就是拼多多平台上的一个以抽纸为购买目标的群体。用户可以在这个群体中分享购买抽纸的经验、使用心得，以及发现各种抽纸的优惠信息。那么，为什么拼多多抽纸群会这么便宜呢？这主要有两
  • 自然语言处理常用单词 ChenVast NLP机器学习算法理论与实战单词自然语言处理NLP
    AA-not-Aquestion正反问句A-over-AA-上-A原则abbreviation缩写[省略语]ablative夺格(的)abrupt突发音accent口音/{Phonetics}重音accusative受格（的）acousticphonetics声学语音学acquisition习得actionverb动作动词active主动语态activechartparser活动图句法剖析程序ac
  • Pyecharts在数据可视化大屏中的应用与实践 我的运维人生 信息可视化运维开发技术共享
    Pyecharts在数据可视化大屏中的应用与实践在数据驱动决策的时代，数据可视化作为连接数据与洞察的桥梁，其重要性不言而喻。而数据大屏，作为数据可视化的高级形态，以其直观、动态、交互性强的特点，广泛应用于企业监控中心、指挥中心、数据中心等场景，成为展示关键业务指标、实时监控数据变化的重要工具。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、易于上手的API设计
  • 基于Echarts+HTML5可视化数据大屏展示—新能源车联网综合大数据平台_新能源汽车大数据分析网站代码 2401_84181070 程序员echartshtml5大数据
    主要代码实现：主页HTML布局：新能源车联网综合大数据平台实时统计<divclass="info-text
  • 数据仓库之【商品订单数据数仓】10：数据可视化工具：Zeppelin安装部署、Zeppelin使用 做一个有趣的人Zz hadoophive数据仓库hivebigdata
    一、数据可视化数据可视化这块不是项目的重点，不过为了让大家能有一个更加直观的感受，我们可以选择一些现成的数据可视化工具实现。咱们前面分析过，想要查询hive中的数据可以使用hue，不过hue无法自动生成图表。所以我们可以考虑使用Zeppelin针对一些复杂的图表，可以选择定制开发，使用echarts、finebi组件实现。二、Zeppelin安装部署注意：不要使用Zeppelin0.8.2版本，这
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他