你的位置:首页 > 软件开发 > 操作系统 > iOS 中集成百度echarts3.0

iOS 中集成百度echarts3.0

发布时间:2017-03-27 00:00:22
突然项目中要用到图表,所以就用了百度的echarts,然后就是网上搜了一下,由于本人的JS不是很熟悉,但是研究了一下还是做出来了,其实也不是很难最后做的效果大概如下图这种,由于界面上没调整,所以粗糙了一点不多说 前端的代码如下<!DOCTYPE html><ht ...

iOS 中集成百度echarts3.0

  1. 突然项目中要用到图表,所以就用了百度的echarts,然后就是网上搜了一下,由于本人的JS不是很熟悉,但是研究了一下还是做出来了,其实也不是很难
  2. 最后做的效果大概如下图这种,由于界面上没调整,所以粗糙了一点iOS 中集成百度echarts3.0
  3. 不多说 前端的代码如下
  4. <!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />  <title>ECharts</title>  <!-- 引入 echarts.js -->  <script src='/images/loading.gif' data-original="echarts.js"></script>  <script type="text/javascript" language="javascript">    var title = "";    var subtext = "";    var legendData;    var xAxisData;    var valueDate;    var valueDateA;    var valueDateB;    var valueDateC;    var subType;    var series;    var myChart = null;    var option;        function setLegendData(legendDat) {      legendData = legendDat;    }    function setXAxisData(xAxisDat                ){      xAxisData = xAxisDat;    }    function setValueDate(valueDat){      valueDate = valueDat;    }    function setValueDateA(valuedatA){      valueDateA = valuedatA;    }    function setValueDateB(valuedatB){      valueDateB = valuedatB;    }    function setValueDateC(valuedatC){      valueDateC = valuedatC;    }    function setSubType(type) {    if(type == "I"){      legendData = new Array('A相电流','B相电流','C相电流');      series = [{           name:legendData[0],           type:'line',           data:valueDateA           },           {           name:legendData[1],           type:'line',           data:valueDateB           },           {           name:legendData[2],           type:'line',           data:valueDateC           },           ];           title = "电流曲线";           subtext = "单位(A)"    }else if(type == "U"){      legendData = new Array('A相电压','B相电压','C相电压');      series = [{           name:legendData[0],           type:'line',           data:valueDateA           },           {           name:legendData[1],           type:'line',           data:valueDateB           },           {           name:legendData[2],           type:'line',           data:valueDateC           },           ];           title = "电压曲线";           subtext = "单位(V)"    }else if(type == "P"){      legendData = new Array('总有功功率','A相有功功率','B相有功功率','C相有功功率');      series = [{           name:legendData[0],           type:'line',           data:valueDate           },           {           name:legendData[1],           type:'line',           data:valueDateA           },           {           name:legendData[2],           type:'line',           data:valueDateB           },           {           name:legendData[3],           type:'line',           data:valueDateC           }           ];                      title = "有功功率曲线";           subtext = "单位(kW)"    }else if(type == "Q"){      legendData = new Array('总无功功率','A相无功功率','B相无功功率','C相无功功率');      series = [{           name:legendData[0],           type:'line',           data:valueDate           },           {           name:legendData[1],           type:'line',           data:valueDateA           },           {           name:legendData[2],           type:'line',           data:valueDateB           },           {           name:legendData[3],           type:'line',           data:valueDateC           }           ];                      title = "无功功率曲线";           subtext = "单位(kVar)"    }else if(type == "S"){      legendData = new Array('总视在功率','A相视在功率','B相视在功率','C相视在功率');      series = [{           name:legendData[0],           type:'line',           data:valueDate           },           {           name:legendData[1],           type:'line',           data:valueDateA           },           {           name:legendData[2],           type:'line',           data:valueDateB           },           {           name:legendData[3],           type:'line',           data:valueDateC           }           ];           title = "视在功率曲线";           subtext = "单位(kW)"               }else if(type == "cos"){      legendData = new Array('总功率因数','A相功率因数','B相功率因数','C相功率因数');      series = [{           name:legendData[0],           type:'line',           data:valueDate           },           {           name:legendData[1],           type:'line',           data:valueDateA           },           {           name:legendData[2],           type:'line',           data:valueDateB           },           {           name:legendData[3],           type:'line',           data:valueDateC           }           ];           title = "视在功率曲线";               }  }    function update() {    // 指定图表的配置项和数据     option = {            title: {        //      text: title,        subtext:subtext      },      toolbox: {        show: true,        feature: {          dataZoom: {            yAxisIndex: 'none'          },        }      },      tooltip: {        trigger: 'axis'      },      legend: {        data:legendData      },            xAxis: {        type: 'category',        boundaryGap: false,        data: xAxisData      },      yAxis: {        type: 'value',        axisLabel: {          formatter: '{value}'        }      },      series: series    };     myChart = echarts.init(document.getElementById('main'));     myChart.setOption(option);  }             </script></head><body><div id="main" style="width: 100%;height:230px;"></div><script type="text/javascript" language="javascript"></script></body></html>

    原标题:iOS 中集成百度echarts3.0

    关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。