重要的事情提前说:一定要注意bottom的宽度和高度,血的教训!!不然看不到任何东西:
//创建饼图
function createTwoChart(title, names,names2) {
var myChartTwo = echarts.init(document.getElementById('bottom'), theme);
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
x: 'right',
y: 'top',
data: ['完成数量', '合同站点数量']
},
calculable: true,
xAxis: [
{
type: 'value'
}
],
grid: { // 控制图的大小,调整下面这些值就可以,
x: 70,
x2: 40,
y2: 30// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
},
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: title,
axisLabel: {
// rotate: 60, 文字斜着60度角度显示
formatter: '{value}'
}
}
],
series: [
{
name: '完成数量',
type: 'bar',
barWidth: 10,
itemStyle: { normal: { label: { show: true, position: 'right' } } },
data: names
},
{
name: '合同站点数量',
type: 'bar',
barWidth: 5,
itemStyle: {
normal: {
label: { show: true ,position: 'right'}
}
},
data: names2
}
]
};
myChartTwo.setOption(option);
}