angularjs中引用echarts

ゝ一世哀愁。 2022-05-15 02:44 250阅读 0赞

首先声明本人angular版本为1.x

1.在html中给echarts图表所在的div设置宽度和高度

![70][]

2.初始化echarts所在的dom元素

![70 1][]

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;
    
      }

效果：

![70 2][]

[70]: /images/20220515/864690d79591490592914685e027bd2f.png
[70 1]: /images/20220515/8223358077c340659d79807905cadaff.png
[70 2]: /images/20220515/00d75247074841b2ae88cf046446c856.png