EChart 关于图标控件的简单实用

1.下载前段框架并放入项目中去.

2.在js中调用


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>ECharts</title>

</head>

<body>

<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->

<!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->

<div

></div>

<div

></div>

<!--Step:2 Import echarts.js-->

<!--Step:2 引入echarts.js-->

<script src="https://www.linuxidc.com/${base.contextPath}/js/echarts.js"></script>

<script type="text/javascript"

src="https://www.linuxidc.com/${base.contextPath}/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript">

// Step:3 conifg ECharts's path, link to echarts.js from current page.

// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径

require.config({

paths : {

echarts : '${base.contextPath}/js'

}

});

// Step:4 require echarts and use it in the callback.

// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径

$(document).ready(

function() {

$.ajax({

url : "${base.contextPath}/total/data?type=1",

type : 'get',

contentType : "application/json",

cache : false,

success : function(text) {

var data = text;

bar(data);

},

error : function(jqXHR, textStatus, errorThrown) {

btnSave.setEnabled(true);

if (400 == jqXHR.status || 403 == jqXHR.status

|| 500 == jqXHR.status)

return;

var text = "操作失败," + jqXHR.responseText;

mini.alert(text);

}

});

});

// bar(null);

function bar(data) {

var sData = new Array();

var sX = new Array();

for (i = 0; i < data.length; i++) {

sData[i] = data[i].total;

sX[i] = data[i].brand;

}

require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line',

//'echarts/chart/map'

], function(ec) {

//--- 折柱 ---

var myChart = ec.init(document.getElementById('main'));

myChart.setOption({

tooltip : {

trigger : 'axis'

},

legend : {

data : [ '总数' ]

},

toolbox : {

show : true,

feature : {

mark : {

show : true

},

dataView : {

show : true,

readOnly : false

},

magicType : {

show : true,

type : [ 'line', 'bar' ]

},

restore : {

show : true

},

saveAsImage : {

show : true

}

}

},

calculable : true,

xAxis : [ {

type : 'category',

data : sX

} ],

yAxis : [ {

type : 'value',

splitArea : {

show : true

}

} ],

series : [ {

name : '总数',

type : 'bar',

data : sData

},

/*  {

name:'降水量',

type:'bar',

data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

} */

]

});

});

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/a58c9899678663eb02939803368a014b.html