echart使用小结

写在前面。定义的接收图表 的容器哦必须设置宽高。  不然可能找不到就报错：Cannot read property 'getAttribute' of null

如果在vue项目里面，写了宽高还报这个错就可能是页面的容器还没有加载完，他还没有找到。

 

动态添加数据

//引入echart
import echarts from 'echarts'
Vue.prototype.$echarts = echarts    //我使用的是vue的项目。所以在main.js里面加入这个。

 

页面直接写个div就行

<div id="chartPie"></div>

 //扇形图         
            loadChart1() {
            
               let myChartPie = this.$echarts.init(document.getElementById('chartPie'));
                var optionsPie = {
                    color: [   //扇形图的背景色
                        '#0d4c8e', '#295dce', '#1579e5', '#74b7ff', '#aad3ff'
                    ],
                    legend: {     //图例
                        orient: 'horizontal',//水平展示，还可以是vertial  垂直
                        x: 'center',
                        y: 'bottom',
                        selectedMode: false,
                        data: ['单择题', '多择题', '判断题', '填空题', '解答题'],
                        formatter: function(name) {
                            return name
                        }
                    },
                    calculable: false,
                    series: [{
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '35%'],
                        data: [],  //这里是图表里面的数据。可以先不写。后面添加
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'inner',  //注释放在扇形里面
                                    formatter: function(params) {
                                        return(params.percent - 0).toFixed(0) + '%'
                                    }
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '12'
                                    }
                                }
                            }
                        }

                    }]
                };
              optionsPie.series[0].data = [{ value: this.pieData[0], name: '单择题' }, { value: this.pieData[1], name: '多择题' }, { value: this.pieData[2], name: '判断题' }, { value: this.pieData[3], name: '填空题' }, { value: this.pieData[4], name: '解答题' }, ];
              myChartPie.setOption(optionsPie);
            
            },