首先声明本人angular版本为1.x
1.在html中给echarts图表所在的div设置宽度和高度
2.初始化echarts所在的dom元素
initOption方法（也可以直接将官网例子中option里面的代码copy进来就可以看到效果）：
var initOption = function () {
var optionDatas = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: [{
name: '财政补贴',
textStyle: { color: 'white' }
}, {
name: '税收',
textStyle: { color: 'white' }
}, {
name: '产值',
textStyle: { color: 'white' }
}, {
name: '就业人数',
textStyle: { color: 'white' }
}]
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#5793f3'
}
},
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
data: ['第一季度', '第二季度', '第三季度', '第四季度']
}
],
yAxis: [
{
type: 'value',
name: '产值',
min: 0,
max: 100,
position: 'right',
axisLine: {
lineStyle: {
color: '#5793f3'
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#fff"
}
}
},
{
type: 'value',
name: '税收',
min: 0,
max: 10,
position: 'left',
axisLine: {
lineStyle: {
color: '#5793f3'
}
},
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '财政补贴',
type: 'bar',
data: [10, 15, 17, 12],
itemStyle: {
normal: {
color: '#61A5EB'
}
}
},
{
name: '税收',
type: 'bar',
data: [22, 20, 21, 20],
itemStyle: {
normal: {
color: '#7ECF51'
}
}
},
{
name: '产值',
type: 'bar',
data: [70, 55, 60, 68],
itemStyle: {
normal: {
color: '#E3935D'
}
}
},
{
name: '就业人数',
type: 'line',
yAxisIndex: 1,
data: [2.1, 5.5, 4.8, 6.0],
itemStyle: {
normal: {
color: '#D0B761'
}
}
}
]
};
return optionDatas;
}
效果：
