你的位置:首页 > 软件开发 > Java > Baidu图表插件

Baidu图表插件

发布时间:2017-02-18 00:00:18
官网链接:http://echarts.baidu.com/index.html官网的demo,api都很详细;我就分享下我的学习步骤 首先定义一个显示图标的区域:<div id="main1" ></div>js代码先贴上:其中a ...

官网链接:http://echarts.baidu.com/index.html

官网的demo,api都很详细;我就分享下我的学习步骤

 

首先定义一个显示图标的区域:

<div id="main1" ></div>

js代码先贴上:

其中ajax返回的是string类型的值;格式:1,2,3,4|11,22,33,44

然后在js中处理成echarts能够识别的格式(其实就是转成数组)

<script type="text/javascript">  // 基于准备好的dom,初始化echarts实例  var myChart = echarts.init(document.getElementById('main1'));  var stock = [];  var capacity = [];  var realnumb = [];  var option;  var temp = [];  var durl = encodeURI('@Url.Action("GetData", "Test")?id=@Model.StockDefineID');  $.ajax({    type: 'get',        url: durl,//请求数据的地址    success: function (data) {      temp = data.split("|");      stock = temp[0].split(",");      capacity = temp[1].split(",");      option = {        title: {          text: '测试数据',          subtext: '数据'        },        tooltip: {          trigger: 'axis',          axisPointer: {            type: 'shadow'          }        },        legend: {          data: ['x1', 'x2']        },        grid: {          left: '3%',          right: '4%',          bottom: '3%',          containLabel: true        },        xAxis: {          type: 'value',          boundaryGap: [0, 0.01]        },        yAxis: {          type: 'category',          //data: ['1', '2', '3', '4', '5', '6']          data: stock        },        series: [          {            clickable: true,            name: '定义一',            type: 'bar',            data: capacity          },          {            clickable: true,            name: '定义二',            type: 'bar',            data: [10, 10, 15, 15, 10, 5]          }        ]      };      myChart.setOption(option);    },    error: function (e) {    }  });  myChart.on('click', function (params) {    //柱装点击事件,params.name:y轴值,arams.seriesName:类目    alert(params.name + " " +params.seriesName);  });     </script>

原标题:Baidu图表插件

关键词:

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

可能感兴趣文章

我的浏览记录