echarts在Vue中的使用

下载echarts

npm i echarts --save

引用echarts

import * as echarts from ‘echarts’
注意：不要使用 import echarts from ‘echarts’,后续会报init没有定义的错误

代码

<div class="echart-pie">
    <div ref="echartsOne" class="echartss"></div>
 </div>

data里的代码

  option: {   
  		    tooltip:{},
  	    	legend: {
  	    		data:['数量'],
  	    		//改变字体颜色
                textStyle:{
                   fontSize: 14,//字体大小
                    color: '#ffffff'//字体颜色
                },
  	    	},
  	    	xAxis: {
  	    		data: ['成都','上海','北京','深圳','福建','江苏'],
  	    		//改变x轴颜色
                   axisLabel: {
                        show: true,
                         textStyle: {
                         color: '#fff'
                         }
                  }
  	    	},
  	    	yAxis: {
  	    		//改变y轴颜色
                  axisLabel: {
                      show: true,
                      textStyle: {
                      color: '#fff'
                      }
                 }
              },
  	    	series: [{
  	    		name: '数量',
  	    		type: 'bar',
  	    		data: [12,5,3,0,0,5],
                itemStyle: {
                   normal: {  
                      color: function(params) {
                      //柱状图每一根柱子的颜色
                      var colorList = ['#61a0a8','#91cc75', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                      return colorList[params.dataIndex]
                }
            }
        }
  	 }]        
  }

方法的代码

  mounted() {
      this.setTest()
  },
  methods: {
      setTest(){
          let bar_dv = this.$refs.echartsOne
          if(bar_dv) {
              let myChart = echarts.init(bar_dv);
                myChart.setOption(this.option)
            }
      }
  }

css

//注意一定要给echartss设置宽高，不然就会看不到，因为高度为0
 .echart-pie {  
    width: 100%;
    height: 340px;
    .echartss {
      width: 100%;
      height: 100%;
    }
  }

效果图