echart绘图备注
柱状图
HTML
Document
JS
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart1 = ec.init(document.getElementById('bar1'));
var myChart2 = ec.init(document.getElementById('bar2'));
option1 = {
title : {
text: '单位:万元',
x:'right',
textStyle:{
fontSize:12
}
},
calculable: false,//柱子拖动属性，如果为true，则柱子可以拖动，并会变成点
xAxis: [{ //x轴配置
axisLine: {
show: false //x轴坐标线
},
axisTick: {
show: false //x轴坐标点
},
splitLine: {
show: true //x轴分裂线，坐标系系中的背景线
},
type: 'category',
data: ['东西湖', '黄陂', '蔡甸', '汉南', '江夏']
}],
yAxis: [{ //y轴配置，与x轴类似
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true
},
axisLabel: { //坐标标识(刻度)
show: false
},
type: 'value'
}],
grid:{ //此属性设置整个canvas与四个边的距离，单位px
x:25,
y:20,
x2:15,
y2:35,
borderWidth:1
},
series: [{
barWidth:5, //每个柱子的宽度设置
itemStyle: {
normal: {
color: '#0090FE',
barBorderRadius:5,//设置柱子的圆角
label: { //在柱子顶部是否显示此柱子的具体
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
}
}
}
},
name: '12312312321321321',
type: 'bar',
data: [4.6, 6.9, 9.0, 12.2, 15.7],
markPoint: {
data: []
},
markLine: {
data: []
}
}]
};
option2 = {
title : {
text: '单位:万元',
x:'right',
textStyle:{
fontSize:12
}
},
calculable: true,
xAxis: [{
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true
},
type: 'category',
data: ['东西湖', '黄陂', '蔡甸', '汉南', '江夏']
}],
yAxis: [{
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true
},
axisLabel: {
show: false
},
type: 'value'
}],
grid:{
x:25,
y:20,
x2:15,
y2:35,
borderWidth:1
},
series: [{
barWidth:5,
itemStyle: {
normal: {
color: '#0090FE',
barBorderRadius:5,//设置柱子的圆角
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
}
}
}
},
name: '',
type: 'bar',
data: [4.6, 6.9, 9.0, 12.2, 15.7],
markPoint: {
data: []
},
markLine: {
data: []
}
}]
};
// 为echarts对象加载数据
myChart1.setOption(option1);
myChart2.setOption(option2);
}
);