echarts使用

Apache ECharts

1、安装echarts

npm install echarts --save
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

2、使用echarts

//饼图 可根据上面链接直接查看echarts的示例
mounted() {
this.chartInit();
},
methods:{
chartInit() {
			
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option;

option = {
	color:['#7181F4','#19D7AC ',],
        //颜色
  tooltip: {
    trigger: 'item',
    //  formatter: "{a} <br/>{b}: {d}%"
  },
  legend: {
    bottom: '0%',
    left: 'center'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['50%', '65%'],
      avoidLabelOverlap: false,
       
      label: {
        show: false,
        position: 'center',
     
        
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold',
  
          
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 20, name: '余额' },
        { value: 50, name: '消耗' },
      ]
    }
  ]
};

option && myChart.setOption(option);
window.onresize=myChart.resize
//适应屏幕变化而变化

                    },  
}

//多个图时，需要适比变化
window.addEventListener('resize', function () {
   myChart.resize()
 })

//组件中
	<div id="main" class="bom_er"></div>
//注意：需要给被调用id的div设置宽高，不然不会显示