程序博客网 > 淘宝怎么修改宝贝图片

Echarts简单应用

来源：互联网 发布：淘宝怎么修改宝贝图片 编辑：程序博客网 时间：2024/05/22 01:51

1：下载：

      url:http://echarts.baidu.com/

2：加入项目

      只须要把：doc\example\www\js下的js文件拷到项目中即可

3：代码：

    

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>ECharts</title>  
  6.     <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->  
  7.     <script src="esl.js"></script>  
  8.   
  9. </head>  
  10.   
  11. <body>  
  12.     <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->  
  13.     <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
  14.       
  15.     <script type="text/javascript">  
  16.     // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
  17.     require.config({  
  18.         paths:{   
  19.             echarts:'./echarts',  
  20.             'echarts/chart/bar' : './echarts-map',  
  21.             'echarts/chart/line': './echarts-map',  
  22.             'echarts/chart/map' : './echarts-map'  
  23.         }  
  24.     });  
  25.       
  26.     // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
  27.     require(  
  28.         [  
  29.         'echarts',  
  30.         'echarts/chart/bar',  
  31.         'echarts/chart/line',  
  32.         'echarts/chart/map'  
  33.         ],  
  34.         function(ec) {  
  35.             //--- 折柱 ---  
  36.             var myChart = ec.init(document.getElementById('main'));  
  37.   
  38.             // 过渡---------------------  
  39.             myChart.showLoading({  
  40.                 text: '正在努力的读取数据中...',    //loading话术  
  41.             });  
  42.   
  43.             var option = {  
  44.     legend: {                               // 图例配置  
  45.         orient:'horizontal',                    //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'  
  46.         x:'center',                             //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
  47.         y:'top',                                //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
  48.         backgroundColor:'rgba(0,0,0,0)',        //图例背景颜色，默认透明  
  49.         borderColor:  '#ccc',                   //图例边框颜色  
  50.         selectedMode:true,                      //图例不能点了（false）  
  51.         padding: 5,                             // 图例内边距，单位px，默认上下左右内边距为5  
  52.         itemGap: 10,                            // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔  
  53.         data: []  
  54.     },  
  55.     toolbox: {                                 //小工具  
  56.         show : true,  
  57.         feature : {  
  58.             mark : true,  
  59.             dataZoom : true,  
  60.             dataView : true,  
  61.             magicType:['line', 'bar'],  
  62.             restore : true,  
  63.             saveAsImage : true  
  64.         }  
  65.     },  
  66.       dataZoom : {                             //缩略图  
  67.         show : true,  
  68.         realtime : true,  
  69.         start : 20,  
  70.         end : 80  
  71.     },  
  72.     tooltip: {                                  // 气泡提示配置  
  73.         trigger: 'axis',                        // 触发类型，默认数据触发，可选为：'axis'  
  74.     },  
  75.   
  76.     xAxis: [                                    // 直角坐标系中横轴数组  
  77.     {  
  78.             type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明  
  79.             boundaryGap: false,                 //数据从坐标轴顶开始  
  80.             data: []  
  81.         }  
  82.         ],  
  83.     yAxis: [                                    // 直角坐标系中纵轴数组  
  84.     {  
  85.             type: 'value',                       // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明                  
  86.             boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略，数组内数值代表百分比  
  87.             splitNumber: 4                      // 数值轴用，分割段数，默认为5  
  88.         }  
  89.         ],  
  90.         series: [  
  91.           
  92.         ]  
  93.     };    
  94.     var jsonranklist={"data":{"1":12,"2":56,"3":20,"4":6},"indata":{"1":3,"2":16,"3":28,"4":56}};//可从后台传入  
  95.     var xname=[];  
  96.   
  97.     for(var key in jsonranklist){  
  98.         var databand=[];  
  99.         if(key=="data"){  
  100.             for(var datakey in jsonranklist[key]){  
  101.                 databand.push(jsonranklist[key][datakey]);  
  102.                 xname.push(datakey);  
  103.             }  
  104.         }  
  105.         if(key=="indata"){  
  106.             for(var datakey in jsonranklist[key]){  
  107.                 databand.push(jsonranklist[key][datakey]);  
  108.             }  
  109.   
  110.         }  
  111.   
  112.     option.legend.data.push(key);//追加数据  
  113.     seriesx={name:key,type:'line',data:databand,itemStyle: {normal: {areaStyle: {}}},stack:'a'};//参数分别表示：数据名称，图表类型，数据，样式：在此是填充，数据叠加（堆积图：相同stack名字的加在一起）  
  114.     option.series.push(seriesx);  
  115.   
  116.   
  117. }  
  118. option.xAxis[0].data=xname;  
  119. myChart.setOption(option);  
  120.   
  121.   
  122. }  
  123. );  
  124. </script>  
  125. </body>  
  126. </html>   

4:通过后台传json来重新绘制图表

   1）：对上面的代码进行修改

        

Html代码  收藏代码
  1. // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
  2.         <span style="color: #ff0000;">var ECharts;   //使其它方法可以访问到它  
  3. </span>     require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',  
  4.                 'echarts/chart/map' ], function(ec) {  
  5.             //--- 折柱 ---  
  6.             ECharts=ec;  
  7.             var myChart = ec.init(document.getElementById('main'));  

     2）：对一按钮增加单击事件然后传值刷新图表

   

Js代码  收藏代码
  1. $('#channelBandwidth').click( function() {  
  2.                 $.ajax({  
  3.                     　　type:'get',//可选get  
  4.                     　　url:'${projectPath}/search',  
  5.                     　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},  
  6.                     　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等  
  7.                     　　success:function(msg){  
  8.                         var msgObj=JSON.parse(msg); <span style="color: #ff0000;"> //因为图表接收的是对象而ajax返回的是字符串，所以须转换  
  9. </span>                     //重新构建图形  
  10.                         var myChart = ECharts.init(document.getElementById('main'));  
  11.                     　     setoptiondata(msgObj,myChart);  
  12.                     　                       　  
  13.                 　　},  
  14.                     　　error:function(){  
  15.                     　　alert('error');  
  16.                     　　}  
  17.             })})  

 具体代码 如下

Html代码  收藏代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4.   
  5. <html lang="en">  
  6. <head>  
  7. <meta charset="utf-8">  
  8. <title>ECharts</title>  
  9. <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->  
  10. <script src="resources/echarts/esl.js"></script>  
  11. <script src="resources/echarts/echarts.js"></script>  
  12. <script src="resources/echarts/echarts-map.js"></script>  
  13.   
  14. <script type="text/javascript">  
  15.         $(document).ready(function() {  
  16.               
  17.             $('#channelBandwidth').click( function() {  
  18.                 $.ajax({  
  19.                     　　type:'get',//可选get  
  20.                     　　url:'${projectPath}/search',  
  21.                     　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},  
  22.                     　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等  
  23.                     　　success:function(msg){  
  24.                         var msgObj=JSON.parse(msg);  
  25.                         //重新构建图形  
  26.                         var myChart = ECharts.init(document.getElementById('main'));  
  27.                     　     setoptiondata(msgObj,myChart);  
  28.                     　       
  29.                     　  
  30.                 　　},  
  31.                     　　error:function(){  
  32.                     　　alert('error');  
  33.                     　　}  
  34.             })})  
  35.         });  
  36.          
  37.     </script>  
  38. </head>  
  39.   
  40. <body>  
  41.   
  42.     <select name="channelType" id="channelType">  
  43.         <option value="channelName">频道名称</option>  
  44.         <option value="channelId">频道id</option>  
  45.     </select>  
  46.     <input type="test" name="channel" id="channel" />  
  47.     <input type="test" name="day" id="day" />  
  48.     <input type="test" name="startTime" id="startTime" />  
  49.     <input type="test" name="endTime" id="endTime" />  
  50.     <select name="database" id="database">  
  51.         <option value="tz">通州</option>  
  52.         <option value="zw">兆维</option>  
  53.     </select>  
  54.     <input type="button" id="channelBandwidth" value="查询" />  
  55.   
  56.     <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->  
  57.     <div id="main"  
  58.         style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>  
  59.       
  60.     <script type="text/javascript">  
  61.         // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
  62.         require.config({  
  63.             paths : {  
  64.                 echarts : './echarts',  
  65.                 'echarts/chart/bar' : './echarts-map',  
  66.                 'echarts/chart/line' : './echarts-map',  
  67.                 'echarts/chart/map' : './echarts-map'  
  68.             }  
  69.         });  
  70.   
  71.         // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
  72.         var ECharts;  
  73.         require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',  
  74.                 'echarts/chart/map' ], function(ec) {  
  75.             //--- 折柱 ---  
  76.             ECharts=ec;  
  77.             var myChart = ec.init(document.getElementById('main'));  
  78.   
  79.             // 过渡---------------------  
  80.             myChart.showLoading({  
  81.                 text : '正在努力的读取数据中...', //loading话术  
  82.             });  
  83.   
  84.               
  85.             jsonranklist = {"data":{"2013-11-08":3,"2013-11-07":5,"2013-11-06":3,"2013-11-05":12},"indata":{"2013-11-08":9,"2013-11-07":7,"2013-11-06":23,"2013-11-05":5}};//可从后台传入  
  86.             setoptiondata(jsonranklist,myChart);  
  87.   
  88.         });  
  89.     function setoptiondata(jsonranklist,myChart){  
  90.         var option = {  
  91.                 legend : { // 图例配置  
  92.                     orient : 'horizontal', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'  
  93.                     x : 'center', //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
  94.                     y : 'top', //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
  95.                     backgroundColor : 'rgba(0,0,0,0)', //图例背景颜色，默认透明  
  96.                     borderColor : '#ccc', //图例边框颜色  
  97.                     selectedMode : true, //图例不能点了（false）  
  98.                     padding : 5, // 图例内边距，单位px，默认上下左右内边距为5  
  99.                     itemGap : 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔  
  100.                     data : []  
  101.                 },  
  102.                 toolbox : { //小工具  
  103.                     show : true,  
  104.                     feature : {  
  105.                         mark : true,  
  106.                         dataZoom : true,  
  107.                         dataView : true,  
  108.                         magicType : [ 'line', 'bar' ],  
  109.                         restore : true,  
  110.                         saveAsImage : true  
  111.                     }  
  112.                 },  
  113.                 dataZoom : { //缩略图  
  114.                     show : true,  
  115.                     realtime : true,  
  116.                     start : 20,  
  117.                     end : 80  
  118.                 },  
  119.                 tooltip : { // 气泡提示配置  
  120.                     trigger : 'axis', // 触发类型，默认数据触发，可选为：'axis'  
  121.                 },  
  122.   
  123.                 xAxis : [ // 直角坐标系中横轴数组  
  124.                 {  
  125.                     type : 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明  
  126.                     boundaryGap : false, //数据从坐标轴顶开始  
  127.                     data : []  
  128.                 } ],  
  129.                 yAxis : [ // 直角坐标系中纵轴数组  
  130.                 {  
  131.                     type : 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明                  
  132.                     boundaryGap : [ 0.1, 0.1 ], // 坐标轴两端空白策略，数组内数值代表百分比  
  133.                     splitNumber : 4  
  134.                 // 数值轴用，分割段数，默认为5  
  135.                 } ],  
  136.                 series : [  
  137.   
  138.                 ]  
  139.             };  
  140.         var xname = [];  
  141.         for ( var key in jsonranklist) {  
  142.             var databand = [];  
  143.             if (key == "data") {  
  144.                 for ( var datakey in jsonranklist[key]) {  
  145.                     databand.push(jsonranklist[key][datakey]);  
  146.                     xname.push(datakey);  
  147.                 }  
  148.             }  
  149.             if (key == "indata") {  
  150.                 for ( var datakey in jsonranklist[key]) {  
  151.                     databand.push(jsonranklist[key][datakey]);  
  152.                 }  
  153.   
  154.             }  
  155.   
  156.             option.legend.data.push(key);//追加数据  
  157.             seriesx = {  
  158.                 name : key,  
  159.                 type : 'line',  
  160.                 data : databand,  
  161.                 itemStyle : {  
  162.                     normal : {  
  163.                         areaStyle : {}  
  164.                     }  
  165.                 },  
  166.                 stack : 'a'  
  167.             };  
  168.             option.series.push(seriesx);  
  169.   
  170.         }  
  171.         option.xAxis[0].data = xname;  
  172.         myChart.setOption(option,true);  
  173.     }  
  174.     </script>  
  175.   
  176. </body>  
  177. </html>  

 5：坐标轴单位格式化

yAxis : [ // 直角坐标系中纵轴数组 
{ 
type : 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明 
axisLabel : { 
formatter:function(value){   //个性化y轴单位
if(value<1000){ 
return value + ' Byte'; 
}else if(value<1000000){ 
return value/1000 +' KB'; 
}else if(value<1000000000){ 
return value/1000000 +' MB'; 
}else if(value<1000000000000){ 
return value/1000000000 +' GB'; 
}else if(value<1000000000000000){ 
return value/1000000000000 +' TB'; 
}else{ 
return value/1000000000000000 +' PB'; 
} 
} 
}

 提示气泡数据格式化

Js代码  收藏代码
  1. tooltip : { // 气泡提示配置  
  2.             trigger : 'axis', // 触发类型，默认数据触发，可选为：'axis'  
  3.                formatter:function(value){  
  4.                     return unitdata(value);  
  5.                 }  
  6.         }  

 

6:2.0增加了用户事件交互（http://echarts.baidu.com/doc/example/event.html）

配置（optione下的calculable:true可以使用所有数据响应事件）
var ecConfig = require('echarts/config'); 
myChart.on(ecConfig.EVENT.CLICK, eConsole);

 会调用自定义函数  function eConsole(param)   param.name可以得到x轴数据

 7:显示图表最值（http://echarts.baidu.com/doc/example/mix10.html）

Js代码  收藏代码
  1. markPoint : {  
  2.                symbol: 'emptyPin',  
  3.                itemStyle : {  
  4.                    normal : {  
  5.                        color:'#1e90ff',  
  6.                        label : {  
  7.                            show:true,  
  8.                            position:'top',  
  9.                            formatter: function (a,b,v) {  
  10.                                return Math.round(v/10000) + ' 万'  
  11.                            }  
  12.                        }  
  13.                    }  
  14.                },  
  15.                data : [  
  16.                    {type : 'max', name: '最大值', symbolSize:5},  
  17.                    {type : 'min', name: '最小值', symbolSize:5}  
  18.                ]  
  19.            },  
  20.            markLine : {  
  21.                symbol : 'none',  
  22.                itemStyle : {  
  23.                    normal : {  
  24.                        color:'#1e90ff',  
  25.                        label : {  
  26.                            show:true,  
  27.                            formatter: function (a,b,v) {  
  28.                                return Math.round(v/10000) + ' 万'  
  29.                            }  
  30.                        }  
  31.                    }  
  32.                },  
  33.                data : [  
  34.                    {type : 'average', name: '平均值'}  
  35.                ]  
  36.            }  
  37.        }  

 8：图例线为直线  图表中不显示图例线（areaStyle: {}用来填充数据型流量图）

seriesx = {name:bunamestr,type:'line',data:outdataband,symbol: 'none',itemStyle: {normal: {areaStyle: {},lineStyle: {width:0}}},stack:'a'};
0 0
淘宝怎么修改宝贝图片 淘宝怎么修改宝贝图片
原创粉丝点击
热门IT博客
淘宝开店代理靠谱吗淘宝开店代理靠谱吗
穿越火线手游开挂软件穿越火线手游开挂软件
立方米网络建站收费
程序员可以转行做什么
手表 推荐知乎
外国软件
5g网络
手机本地端口1080
情绪 知乎
常见的hash算法
java 统计访问次数
知乎v领毛衣配衬衫女
皮皮麻将 软件软件
零售数据分析
网络代运营主要干什么
java包装简历
淘宝双11秒杀在哪里
淘宝抽纸
自然知彼怎么代理
sql 日期排序
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 藤三七叶的正确吃法 三七面膜的功效与作用 田七和三七有什么区别 三七和田七有什么区别 三七怎么吃效果好 三七长什么样子植物图片 三七多少头的好 三七粉的价格 三七图片植物图片 三七叶子能吃吗 田七是三七吗 中药三七粉的功效与作用 三七花的功效 三七有什么作用 田七与三七有何区别 三七植物的种类图片 中药三七的功效与作用 三七好坏鉴别图片 三七的吃法及禁忌 三七炖鸡的功效与作用 三七与西洋参混合功效与作用 三七的功效与作用及禁忌 三七的市场价格 三七可以泡水喝吗 三七多少个头的好 三七的作用和功效 中药三七的价格 三七叶的吃法 药店三七多少钱一斤 男生三七分发型 三七20头什么意思 三七批发价格 正宗三七多少钱一斤 三七可以泡酒吗 三七作用和功效 三七作用与功效 30头三七多少钱一斤 三七炖鸡的做法 三七和西洋参混合功效 三七破壁饮片 现在三七多少钱一斤

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里