echarts简单条形图和饼状图
填充条形图：
我这说的固定的意思是要展示的字段是已知的，动态的是接受到的后台返回的json然后遍历动态加载。
1.固定值
function xmhtCountByMonthBar(data){
var dom = document.getElementById("xmhtCountByMonthBar");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '合同数'],
['1月', data.xmhts1],
['2月', data.xmhts2],
['3月', data.xmhts3],
['4月', data.xmhts4],
['5月', data.xmhts5],
['6月', data.xmhts6],
['7月', data.xmhts7],
['8月', data.xmhts8],
['9月', data.xmhts9],
['10月', data.xmhts10],
['11月', data.xmhts11],
['12月', data.xmhts12]
]
},
toolbox: {
show: true,
feature: {
mark: { show: false },
dataView: { show: false, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{type: 'category', splitLine:{show: true},
splitArea:{
show:true,
areaStyle:{
color:['rgba(100, 100, 100, 0.03)'],
}
}
}],
yAxis: {
type: 'value',
name: '数量(个)',
min: 0,
// max: 50,
// interval: 5,
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
axisLabel: {
formatter: '{value}'
}
},
series: [
{type: 'bar',
itemStyle : { normal: {label : {show: true, position: 'top',textStyle:{color:'#000000'}} }},
barWidth : 15,
},
]};
if (option && typeof option === "object") {myChart.setOption(option, true);}
}
如图：
2.动态填充
function xmhtCountByZbgsBar(names,nums){//接受names列名称，nums列值
var dom = document.getElementById("xmhtCountByZbgsBar");
var myChart = echarts.init(dom);
myChart.setOption({
tooltip: {},
legend: {
data:['合同数']
},
xAxis: {
data: [],
axisLabel:{
formatter:function(value){
return value.split("").join("\n");
}
},
type: 'category',
splitLine:{show: true},
splitArea:{
show:true,
areaStyle:{
color:['rgba(100, 100, 100, 0.03)'],
}
}
},
toolbox: {
show: true,
feature: {
mark: { show: false },
dataView: { show: false, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: true }
}
},
yAxis: {
type: 'value',
name: '数量(个)',
min: 0,
// max: 50,
// interval: 5,
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
axisLabel: {
formatter: '{value}'
}
},
series: [{
name: '个数',
type: 'bar',
data: []
}]
});
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '数量',
data: nums,
itemStyle : { normal: {label : {show: true, position: 'top',textStyle:{color:'#000000'}} }},
barWidth : 15,
}]
});
}
如图：
填充饼图：
1.设置固定值
function xmhtByMonthSector(data){
var myChart = echarts.init(document.getElementById('xmhtByMonthSector'));
var option = {
title: {
x: 'left',
y: 'left'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'right',
y: 'bottom',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
toolbox: {
show: true,
feature: {
mark: { show: false },
dataView: { show: false, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: false },
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '数量',
type: 'pie',
radius: ['30%', '60%'],
center: ['45%', '45%'],
//roseType: 'area',
data: [
{ value: data.xmhts1==0?null:data.xmhts1, name: '一月' },
{ value: data.xmhts2==0?null:data.xmhts2, name: '二月' },
{ value: data.xmhts3==0?null:data.xmhts3, name: '三月' },
{ value: data.xmhts4==0?null:data.xmhts4, name: '四月' },
{ value: data.xmhts5==0?null:data.xmhts5, name: '五月' },
{ value: data.xmhts6==0?null:data.xmhts6, name: '六月' },
{ value: data.xmhts7==0?null:data.xmhts7, name: '七月' },
{ value: data.xmhts8==0?null:data.xmhts8, name: '八月' },
{ value: data.xmhts9==0?null:data.xmhts9, name: '九月' },
{ value: data.xmhts10==0?null:data.xmhts10, name: '十月' },
{ value: data.xmhts11==0?null:data.xmhts11, name: '十一月' },
{ value: data.xmhts12==0?null:data.xmhts12, name: '十二月' }
],
/* tooltip: {
trigger: 'item',
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 20, // 隐藏延迟，单位ms
backgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景颜色
textStyle: {
fontSize: '16px',
color: '#000' // 设置文本颜色 默认#FFF
},
formatter: '{a} <br/>{b} : {c}个 ({d}%)'
} */
}
]
};
myChart.setOption(option);
}
如图：
2.动态值
function xmhtByZbgsSector(names,nums){
var myChart = echarts.init(document.getElementById('xmhtByZbgsSector'));
myChart.setOption({
// color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
title: {
x: 'left',
y: 'left'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true,
feature: {
saveAsImage: { show: true }
}
},
legend: {
x: 'right',
y: 'bottom',
data: names
},
calculable: true,
series: [{
name: '数量',
type: 'pie',
radius: ['30%', '60%'],
center: ['45%', '40%'],
data: [],
// 设置值域的那指向线
labelLine: {
normal: {
show: true // show设置线是否显示，默认为true，可选值：true ¦ false
}
},
}]
});
//myChart.showLoading();
//myChart.hideLoading();
myChart.setOption({ //加载数据图表
legend: {
data: names
},
series: [{
data: nums
}]
});
// myChart.setOption(option);
}
如图：
//////////////////////////
//项目数量统计饼图
function itemsCountBySector1(data){
var myChart = echarts.init(document.getElementById('itemsSector1'));
var option = {
title: {
//text: '项目数量统计',
//subtext: '纯属虚构',
x: 'left',
y: 'left'
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'bottom',
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的高
textStyle: {
color: '#666' // 图例文字颜色
},
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 30,
backgroundColor: '#fff6f2', // 设置整个图例区域背景颜色
data: ['部门基本经费', '校内专项', '财政专项', '追加项目']
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true,
feature: {
saveAsImage: { show: true }
}
},
calculable: true,
series: [
{
name: '',
type: 'pie', //饼状图
radius: '65%', //大小
center: ['45%', '50%'], //显示位置
data: [
{ value: data.depSums==0?null:data.depSums, name: '部门基本经费' },
{ value: data.collegeSums==0?null:data.collegeSums, name: '校内专项' },
{ value: data.financeSums==0?null:data.financeSums, name: '财政专项' },
{ value: data.addSums==0?null:data.addSums, name: '追加项目' }
],
itemStyle: {
normal: {
label: { //此处为指示线文字
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 200,
fontSize: 14 //文字的字体大小
},
formatter: ' {d}%'
},
}
},
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
如下：
