jquery +Echart画图表

$(function () {$.ajax({type:"post",async:false,data:{},url:"../codeindex/codeFormatConvert",success:function(d){var data = d.data;//概况codeStatus(data);chart1(data);chart2(data);chart3(data);chart4(data);}});
});function codeStatus(data){$(".main_round:eq(0)").html(data.monthCodeHeat.codeSum);$(".main_round:eq(1)").html(data.monthCodeHeat.monthCodeSum);$(".main_round:eq(2)").html(data.cityCodeHeat.viewCount);$(".main_round:eq(3)").html(data.cityCodeHeat.apraiseCount);
}
function chart1(data){if(data && data.monthCodeHeats){var arr1 = new Array();var arr2 = new Array();var arr3 = new Array();for(var i=0;i<data.monthCodeHeats.length;i++){var time=data.monthCodeHeats[i].statisDate.substr(4,2)+"/"+data.monthCodeHeats[i].statisDate.substr(6,2);arr1.push(time);arr2.push(data.monthCodeHeats[i].dateCodeSum);}// ----------------------------第1个echarts  当月模型热度趋势图 start--------------------------var myChart1 = echarts.init(document.getElementById('model_hot_trend'));option = {tooltip:{trigger:'axis',},legend: {name: ['上传数量'],right: 43,selectedMode: false, // 图例不可点击},xAxis: {type: 'category',boundaryGap: false,//data: ['4/1', '4/3', '4/7', '4/9', '4/11', '4/13', '4/15'],data:arr1,axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},axisTick: {show: true, //是否显示坐标轴刻度inside: true, //坐标轴刻度是否朝内，true为朝内，false为朝外},axisLabel:{color:"#666",   //刻度标签的文字颜色}},yAxis: {type: 'value',axisLine: { //设置坐标轴轴线样式lineStyle: {color: "#aaa", //y轴坐标轴轴线颜色}},axisTick: {show: false, //是否显示坐标轴刻度},axisLabel:{color:"#666",   //刻度标签的文字颜色}},series: [{// data: [130, 187, 110, 190, 120, 240, 50],data:arr2,type: 'line',name: "上传数量",symbolSize: 8, //设定实心点的大小legendHoverLink: false, //鼠标经过图例时，不高亮areaStyle: {color: "#408EF0", //区域背景颜色opacity: 0.2 //区域背景透明度，值为0-1},itemStyle: {normal: {color: "#91AFE1", //设置折线点上的颜色lineStyle: {color: "#91AFE1", //设置折线的颜色}}},silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。}]};myChart1.setOption(option);// ----------------------------第1个echarts  当月模型热度趋势图 end--------------------------}
}
function chart2(data){if(data && data.userCodeHeats){var arr1 = new Array();var arr2 = new Array();var arr3 = new Array();for(var i=0;i<data.userCodeHeats.length;i++){arr1.push(data.userCodeHeats[i].tenantName);arr2.push(data.userCodeHeats[i].viewCount);arr3.push(data.userCodeHeats[i].apraiseCount);}// -----------------------------第2个echarts  当月租户模型热度分析 start-------------------------var myChart2 = echarts.init(document.getElementById('tenement_hot_analysis'));option = {tooltip:{trigger:'axis',},legend: {name: ['访问次数', '评论次数'],right: 43,selectedMode: false, // 图例不可点击},xAxis: {data: arr1,axisTick: { //坐标轴相关配置show: true, //是否显示坐标轴刻度inside: true //坐标轴刻度朝向，true为朝内，false朝外，默认false},axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},axisLabel:{color:"#666",   //刻度标签的文字颜色}},yAxis: {splitLine: { //坐标轴在grid区域中的分割线show: true, //显示分割线},axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},axisLabel:{color:"#666",   //刻度标签的文字颜色}},// animationDurationUpdate: 1200,series: [{type: 'bar',name: '访问次数',legendHoverLink: false, //鼠标经过图例时，不高亮itemStyle: { //柱状图图形样式normal: {color: '#4B9CF8' //柱颜色}},silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。barWidth: 20, //柱状图宽度barGap: 0, //不同系列的柱间间距data:arr2},{type: 'bar',name: '评论次数',legendHoverLink: false, //鼠标经过图例时，不高亮itemStyle: { //柱状图图形样式normal: {color: '#BBB3E4'}},barWidth: 20,silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。//z: 10,  //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。data: arr3}]};myChart2.setOption(option);// -----------------------------第2个echarts 当月租户模型热度分析 end-------------------------}
}
function chart3(data){if(data && data.cityCodeHeats){var arr1 = new Array();var arr2 = new Array();var arr3 = new Array();for(var i=0;i<data.cityCodeHeats.length;i++){arr1.push(data.cityCodeHeats[i].departmentName);arr2.push(data.cityCodeHeats[i].viewCount);arr3.push(data.cityCodeHeats[i].apraiseCount);}// -----------------------------第3个echarts 当月地市模型热度分析 start-------------------------var myChart3 = echarts.init(document.getElementById('cities_hot_analysis'));option = {tooltip:{trigger:'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {name: ['访问次数', '评论次数'],right: 43,selectedMode: false, // 图例不可点击},yAxis: {data: arr1,axisTick: { //坐标轴相关配置show: true, //是否显示坐标轴刻度inside: true //坐标轴刻度朝向，true为朝内，false朝外，默认false},axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},axisLabel:{color:"#000",   //刻度标签的文字颜色}},xAxis: {splitLine: { //坐标轴在grid区域中的分割线show: true, //显示分割线},axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},axisLabel:{color:"#000",   //刻度标签的文字颜色}},// animationDurationUpdate: 1200,series: [{type: 'bar',name: '访问次数',legendHoverLink: false, //鼠标经过图例时，不高亮itemStyle: { //柱状图图形样式normal: {color: '#21AE9E' //柱颜色}},silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。barWidth: 8, //柱状图宽度barGap: 0, //不同系列的柱间间距data:arr2},{type: 'bar',name: '评论次数',legendHoverLink: false, //鼠标经过图例时，不高亮itemStyle: { //柱状图图形样式normal: {color: '#FFC94F'}},barWidth: 8,silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。//z: 10,  //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。data: arr3}]};myChart3.setOption(option);// -----------------------------第3个echarts 当月地市模型热度分析-------------------------}
}
function chart4(data){if(data && data.businessCodeHeats){var arr1 = new Array();var arr2 = new Array();var arr3 = new Array();for(var i=0;i<data.businessCodeHeats.length;i++){arr1.push(data.businessCodeHeats[i].projectName);arr2.push(data.businessCodeHeats[i].viewCount);arr3.push(data.businessCodeHeats[i].apraiseCount);}// ----------------------------第4个echarts 当月业务模型热度分析 start--------------------------var myChart4 = echarts.init(document.getElementById('business_hot_analysis'));option = {tooltip:{trigger:'axis',},legend: {name: ['访问次数', '评论次数'],right: 43,selectedMode: false, // 图例不可点击},xAxis: {data: arr1,axisTick: { //坐标轴相关配置show: true, //是否显示坐标轴刻度inside: true //坐标轴刻度朝向，true为朝内，false朝外，默认false},axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},nameTextStyle: {color: "#000", //坐标轴名称的颜色},axisLabel:{color:"#666",   //刻度标签的文字颜色}},yAxis: [{type: 'value',name: '访问次数',data:arr2,/*min: 0,max: 10000,*/axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},nameTextStyle: {color: "#666", //坐标轴名称的颜色},axisTick: { //  坐标轴刻度相关设置show: false,},splitLine: { //坐标轴在grid区域中的分割线show: false, //隐藏分割线},axisLabel:{color:"#666",   //刻度标签的文字颜色}},{type: 'value',name: '评论次数',data:arr3,/*min: 0,max: 10000,*/axisLine: {lineStyle: {color: "#aaa", //x轴坐标轴轴线颜色}},nameTextStyle: {color: "#666", //坐标轴名称的颜色},axisTick: { //  坐标轴刻度相关设置show: false,},axisLabel:{color:"#666",   //刻度标签的文字颜色}}],series: [{type: 'bar',name: '访问次数',itemStyle: { //柱状图图形样式normal: {color: '#BBB3E4', //柱颜色borderColor: '#7869C4',}},//legendHoverLink: false, //鼠标经过图例时，不高亮barWidth: 30, //柱状图宽度barGap: 0, //不同系列的柱间间距data: arr2,//silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。},{type: 'line',name: '评论次数',itemStyle: { //柱状图图形样式normal: {color: '#EC6E71'}},symbolSize: 8, //设定实心点的大小//legendHoverLink: false, //鼠标经过图例时，不高亮data: arr3,yAxisIndex: 1,//silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。}]};myChart4.setOption(option);// ----------------------------第4个echarts 当月业务模型热度分析 end--------------------------}
}

jquery +Echart画图表相关推荐

Echart 画图表
前端可视化数据显示 Echart 为什么选择它,没选择蚂蚁金服的AntV 两个字方便特别是与前端的 js AntV 配置麻烦,我只需要工具快速开发图表而已与jsp关联 ...
uni-app 使用web的echarts画图表
uni-app 使用web的echarts画图表 initEcharts: function() {let data = {xAxis: [0, 1, 2, 3, 4, 5],data: [25, 3 ...
使用echarts画图表
项目需要在网页上画图表,在网上找了一下,发现百度出品的echarts非常好用.echarts把看似复杂的图表进行了分解,使用结构化的模型来完成图表的配置.画图表就跟写CSS一样,实际上echarts使 ...
用python绘制柱状图标题-零基础用 Python 画图表，让你的论文高一个逼格
原标题:零基础用 Python 画图表,让你的论文高一个逼格曾经我在高中的时候有一篇数学探索的小作业,其中我需要画出一张比较复杂的函数图.由于 X 和 Y 的坐标轴标签都需要一定的自定义,所以微软 ...
一篇搞定写毕设和画图表
博主在上个星期五答辩完了,很顺利地通过了一辩,等级是优,总的来说,归结于两个地方:一个是系统做的很好,还有就是论文写的很严谨.下面就详细讲下我自己的经验--如何写论文以及如何画图表. 文章目录一.写 ...
Grafana画图表教程
Grafana画图表教程 1.添加数据 2.设置整个dashboard:调整变量/修改历史/权限控制/另存为等等 3.权限控制可以根据角色/团队/个人的维度来指定dashboard的权限 4.编辑: ...
使用echart画出渐变色饼图（圆环图环形渐变）
使用echart画出渐变色饼图(圆环图环形渐变) 说明常用的渐变有径向渐变和线性渐变, 环形图是 echarts 中 pie 图的一个变种,echarts 官方对于 pie 图的颜色渐变只支持两种: ...
html 圆圈图表插件,利用jquery html5实现图表动画圆形饼图
特效描述:利用jquery html5实现图表动画圆形饼图.利用jquery html5实现图表动画圆形饼图代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 *{margin:0; ...
jQuery的Flot图表统计插件集成
jQuery的Flot图表统计插件集成这应该是在这的最后一次写经验分享文档了,一直以来是想从自己做起,影响带动身边的同事的,不过貌似大家都很不喜欢写分享文档,有时候不经感叹中国的技术发展之所以慢也想 ...

jquery +Echart画图表

jquery +Echart画图表相关推荐

最新文章

热门文章