如何使用jquery来初始化echarts

 我来答
27个回答
#合辑# 机票是越早买越便宜吗？
年度最佳人品
2018-01-18 · TA获得超过143个赞
知道答主
回答量：241
采纳率：100%
帮助的人：74.6万
我也去答题访问个人页
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="domainchart" style="height: 600px;width: 950px;">
</div>
<script>
var data = [{
"wtfl": "1",
"wtflName": null,
"month": "1",
"totalNum": 1
},
{
"wtfl": "2",
"wtflName": null,
"month": "1",
"totalNum": 27
},
{
"wtfl": "3",
"wtflName": null,
"month": "1",
"totalNum": 1
},
{
"wtfl": "4",
"wtflName": null,
"month": "1",
"totalNum": 4
},
{
"wtfl": "5",
"wtflName": null,
"month": "1",
"totalNum": 1
},
{
"wtfl": "2",
"wtflName": null,
"month": "2",
"totalNum": 20
},
{
"wtfl": "3",
"wtflName": null,
"month": "2",
"totalNum": 5
},
{
"wtfl": "4",
"wtflName": null,
"month": "2",
"totalNum": 2
},
{
"wtfl": "5",
"wtflName": null,
"month": "2",
"totalNum": 2
},
{
"wtfl": "1",
"wtflName": null,
"month": "3",
"totalNum": 1
},
{
"wtfl": "2",
"wtflName": null,
"month": "3",
"totalNum": 26
},
{
"wtfl": "3",
"wtflName": null,
"month": "3",
"totalNum": 1
},
{
"wtfl": "4",
"wtflName": null,
"month": "3",
"totalNum": 7
},
{
"wtfl": "5",
"wtflName": null,
"month": "3",
"totalNum": 1
},
{
"wtfl": "7",
"wtflName": null,
"month": "3",
"totalNum": 1
},
{
"wtfl": "1",
"wtflName": null,
"month": "4",
"totalNum": 3
},
{
"wtfl": "2",
"wtflName": null,
"month": "4",
"totalNum": 18
},
{
"wtfl": "3",
"wtflName": null,
"month": "4",
"totalNum": 2
},
{
"wtfl": "4",
"wtflName": null,
"month": "4",
"totalNum": 3
},
{
"wtfl": "1",
"wtflName": null,
"month": "5",
"totalNum": 1
},
{
"wtfl": "2",
"wtflName": null,
"month": "5",
"totalNum": 26
},
{
"wtfl": "3",
"wtflName": null,
"month": "5",
"totalNum": 5
},
{
"wtfl": "4",
"wtflName": null,
"month": "5",
"totalNum": 14
},
{
"wtfl": "5",
"wtflName": null,
"month": "5",
"totalNum": 4
},
{
"wtfl": "1",
"wtflName": null,
"month": "6",
"totalNum": 4
},
{
"wtfl": "2",
"wtflName": null,
"month": "6",
"totalNum": 23
},
{
"wtfl": "3",
"wtflName": null,
"month": "6",
"totalNum": 20
},
{
"wtfl": "4",
"wtflName": null,
"month": "6",
"totalNum": 16
},
{
"wtfl": "5",
"wtflName": null,
"month": "6",
"totalNum": 4
},
{
"wtfl": "6",
"wtflName": null,
"month": "6",
"totalNum": 1
},
{
"wtfl": "7",
"wtflName": null,
"month": "6",
"totalNum": 1
},
{
"wtfl": "1",
"wtflName": null,
"month": "7",
"totalNum": 2
},
{
"wtfl": "2",
"wtflName": null,
"month": "7",
"totalNum": 38
},
{
"wtfl": "3",
"wtflName": null,
"month": "7",
"totalNum": 21
},
{
"wtfl": "4",
"wtflName": null,
"month": "7",
"totalNum": 26
},
{
"wtfl": "5",
"wtflName": null,
"month": "7",
"totalNum": 3
},
{
"wtfl": "6",
"wtflName": null,
"month": "7",
"totalNum": 2
},
{
"wtfl": "7",
"wtflName": null,
"month": "7",
"totalNum": 6
},
{
"wtfl": "1",
"wtflName": null,
"month": "8",
"totalNum": 2
},
{
"wtfl": "2",
"wtflName": null,
"month": "8",
"totalNum": 34
},
{
"wtfl": "3",
"wtflName": null,
"month": "8",
"totalNum": 9
},
{
"wtfl": "4",
"wtflName": null,
"month": "8",
"totalNum": 20
},
{
"wtfl": "5",
"wtflName": null,
"month": "8",
"totalNum": 2
},
{
"wtfl": "6",
"wtflName": null,
"month": "8",
"totalNum": 2
},
{
"wtfl": "7",
"wtflName": null,
"month": "8",
"totalNum": 3
},
{
"wtfl": "8",
"wtflName": null,
"month": "8",
"totalNum": 1
},
{
"wtfl": "1",
"wtflName": null,
"month": "9",
"totalNum": 9
},
{
"wtfl": "2",
"wtflName": null,
"month": "9",
"totalNum": 27
},
{
"wtfl": "3",
"wtflName": null,
"month": "9",
"totalNum": 22
},
{
"wtfl": "4",
"wtflName": null,
"month": "9",
"totalNum": 50
},
{
"wtfl": "5",
"wtflName": null,
"month": "9",
"totalNum": 4
},
{
"wtfl": "6",
"wtflName": null,
"month": "9",
"totalNum": 5
},
{
"wtfl": "7",
"wtflName": null,
"month": "9",
"totalNum": 2
},
{
"wtfl": "1",
"wtflName": null,
"month": "10",
"totalNum": 5
},
{
"wtfl": "2",
"wtflName": null,
"month": "10",
"totalNum": 73
},
{
"wtfl": "3",
"wtflName": null,
"month": "10",
"totalNum": 18
},
{
"wtfl": "4",
"wtflName": null,
"month": "10",
"totalNum": 36
},
{
"wtfl": "5",
"wtflName": null,
"month": "10",
"totalNum": 4
},
{
"wtfl": "6",
"wtflName": null,
"month": "10",
"totalNum": 3
},
{
"wtfl": "8",
"wtflName": null,
"month": "10",
"totalNum": 1
},
{
"wtfl": "1",
"wtflName": null,
"month": "11",
"totalNum": 2
},
{
"wtfl": "2",
"wtflName": null,
"month": "11",
"totalNum": 126
},
{
"wtfl": "3",
"wtflName": null,
"month": "11",
"totalNum": 29
},
{
"wtfl": "4",
"wtflName": null,
"month": "11",
"totalNum": 37
},
{
"wtfl": "5",
"wtflName": null,
"month": "11",
"totalNum": 3
},
{
"wtfl": "6",
"wtflName": null,
"month": "11",
"totalNum": 6
},
{
"wtfl": "1",
"wtflName": null,
"month": "12",
"totalNum": 2
},
{
"wtfl": "2",
"wtflName": null,
"month": "12",
"totalNum": 73
},
{
"wtfl": "3",
"wtflName": null,
"month": "12",
"totalNum": 31
},
{
"wtfl": "4",
"wtflName": null,
"month": "12",
"totalNum": 40
},
{
"wtfl": "5",
"wtflName": null,
"month": "12",
"totalNum": 11
},
{
"wtfl": "6",
"wtflName": null,
"month": "12",
"totalNum": 2
},
{
"wtfl": "7",
"wtflName": null,
"month": "12",
"totalNum": 3
},
{
"wtfl": "8",
"wtflName": null,
"month": "12",
"totalNum": 1
}
];
</script>
<script type="text/javascript" src="echarts.min.js"></script>
<script>
var packageData = {};
var chartsObjName = [];
var issueNames = ['事故处理', '违法处理', '交通组织', '交通秩序', '交通设施', '涉纪投诉','车驾管业务','互联网业务'];
var max=0;

for(var i = 0; i < data.length; i++) {
if(packageData[data[i].month]) {
if(max<data[i].totalNum)
max = data[i].totalNum;
packageData[data[i].month][data[i].wtfl - 1] = data[i].totalNum;
} else {
if(max<data[i].totalNum)
max = data[i].totalNum;
packageData[data[i].month] = new Array(8);
chartsObjName.push(data[i].month);
packageData[data[i].month][data[i].wtfl - 1] = data[i].totalNum;
}
}

max = Math.floor(1.2*max);

for(var j = 0; j < chartsObjName.length; j++) {
for(var k = 0; k < 8; k++) {
if(!packageData[chartsObjName[j]][k]) {
packageData[chartsObjName[j]][k] = 0;
}
}
}
//packageData为拼装好的后台数据，chartsObjName数据条数（这里8种类型，即8条数据），issueNames问题名称
function areaChart(thisPackageData, chartsObjName,issueNames) {
var myChartQ = echarts.init(document.getElementById('domainchart'), 'dark');
var dataMap = {};
var dataGroup = [];
function dataFormatter(obj) {
var temp;
for(var x = 1; x <= chartsObjName.length; x++) {
var max = 0;
var sum = 0;
temp = obj[x];
for(var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[x][i] = {
name: issueNames[i],
value: temp[i]
}
}
obj[x + 'max'] = Math.floor(max / 100) * 100;
obj[x + 'sum'] = sum;
}
return obj;
}
dataMap.dataPackge = dataFormatter(thisPackageData);

//封装柱状图+饼图数据加载。
for(var b=1;b<=chartsObjName.length;b++){
var pieData = [];
for(var c=0;c<packageData[b].length;c++){
var pieList = {
name: issueNames[c],
value: packageData[b][c].value
}
pieData.push(pieList);
}
var thisData = {
title: {
text: b +'月问题分析数据列表'
},
series: [{
data: dataMap.dataPackge[b]
},{
data: pieData
}]
}
dataGroup.push(thisData);
}
var optiondomain = {
baseOption: {
timeline: {
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data: [
'一月', '二月', '三月', '四月', '五月', '六月', '七月',
'八月', '九月', '十月', '十一月', '十二月'
],
label: {
formatter: function(s) {
return s;
}
}
},
title: {
subtext: '区域问题分析'
},
backgroundColor: 'rgba(0,0,0,.1)',
tooltip: {},
legend: {
x: 'right',
data: ['事故处理', '违法处理', '交通组织', '交通秩序', '交通设施', '涉纪投诉', '车驾管业务', '互联网业务']
},
calculable: true,
grid: {
top: 80,
bottom: 100
},
xAxis: [{
'type': 'category',
'axisLabel': {
'interval': 0
},
'data': [
'事故处理', '违法处理', '交通组织', '交通秩序', '交通设施', '涉纪投诉', '车驾管业务', '互联网业务'
],
splitLine: {
show: false
}
}],
yAxis: [{
type: 'value',
name: '问题数量（起）',
// max: 53500
max: max
}],
series: [{
name: '事故处理',
type: 'bar'
}, {
name: '问题类别占比',
type: 'pie',
center: ['75%', '35%'],
radius: '28%'
}]
},
options: dataGroup
};
myChartQ.setOption(optiondomain);
}
areaChart(packageData, chartsObjName, issueNames);
</script>
</body>
</html>
jQuery同理用$(function(){
//areaChart(packageData, chartsObjName, issueNames);
});
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
juan7617
2018-01-10
知道答主
回答量：11
采纳率：0%
帮助的人：9663
我也去答题访问个人页
展开全部
1.先从网上下载利用script标签引入echarts.js
2.然后在你需要插入表格的HTML页面中定义一个div盒子，给盒子一个id
<div id="bar" style="width: 280px;height:240px;"></div>
3.在js里面初始化 document.getElementById('bar').echarts({
})
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
嘎嘎版额
2018-01-18 · TA获得超过308个赞
知道小有建树答主
回答量：318
采纳率：80%
帮助的人：91万
我也去答题访问个人页
展开全部

那官方实力来说:

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

换成

 var myChart = echarts.init($("#main")[0]);

不过我感觉好方      .....

已赞过 已踩过<
你对这个回答的评价是？
评论 收起
刘宏毅少儿编程
2018-01-16 · 十年退休程序员，从事少儿编程
刘宏毅少儿编程
采纳数：0 获赞数：0

向TA提问 私信TA
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = { }; // 曲线设置参数
myChart.setOption(option); </script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
小巴菜鸟
2018-01-14 · TA获得超过908个赞
知道小有建树答主
回答量：2727
采纳率：63%
帮助的人：212万
我也去答题访问个人页
展开全部
页面用jquery/ajax获得后台数据，然后用查得的数据拼接option这个json串，成功后重新执行setOption();这个方法。
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
<上一页123456下一页>
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式