关于vue中使用eacharts(最近项目需求中需要使用eacharts，应需求所做总结)

1.基础（eacharts   resize事件记录，基础柱状图）

-1DOM

<div id="capacity"  class="heights"></div>

-2JS

capacityEachart(){
      			let capacity=this.$echarts.init(document.getElementById("capacity"));//eacharts实例
      			let options = {
      				title: {
				        text: '运行容量',
				        textStyle:{
				        	fontSize:14
				        }
				    },
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'直接访问',
				            type:'bar',
				            barWidth: '60%',
				            data:[10, 52, 200, 334, 390, 330, 220]
				        }
				    ]
				};
      			capacity.setOption(options);

*******事件监听，根据窗体大小响应
      			window.addEventListener('resize',function(){
      				capacity.resize()
      			})
      		},

效果图

2.状态图渐变色

-1DOM

<div id="myChart" :style="{width: '900px', height: '500px',margin:'0 auto',top:'40px'}"></div>

-2JS

drawLine() {
            let myChart = this.$echarts.init(
                document.getElementById("myChart")
            );
            myChart.setOption({
                color: ["#737cfe"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "value",
                        axisTick: {
                            show: false
                        },
                        axisLine:{       //x轴
                            show:false
                            },
                    }
                ],
                yAxis: [
                    {
                        type: "category",
                        data:this.tradeData.nameList,
                         axisTick: {
                            show: false
                        },
                        axisLine:{       //y轴
                            show:false
                            },
                    }
                ],
                series: [
                    {
                        name: "财富值",
                        type: "bar",
                        barCategoryGap: 10,
                        barWidth: 20,
                        data:this.tradeData.richdataList,
                        itemStyle: {
                            emphasis: {
                                barBorderRadius: 10
                            },

***********渐变色效果（需要注意的是如果只是在组件中使用eacharts，需要将eacharts引入import echarts from 'echarts'）
                            normal: {
                                barBorderRadius: 20,
                                color: new echarts.graphic.LinearGradient(
                                            0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#737cfe'},
                                    {offset: 1, color: '#ea82ef'}
                                ]
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.4)",
                                shadowBlur: 20
                            },
                        }
                    }
                ],
            });
            
            window.onresize = myChart.resize;
        },

效果图