官网链接: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
(#换成@)。