echarts 入门配置

悠悠 2021-07-24 21:10 424阅读 0赞

非vue引入echarts.js文件
    
    echarts必须要有个有高宽的容器来盛放地图
    
    vue中配置:
    
    1、cnpm install echarts --save
    
    2、引入echarts
    
    3、**在组件的生命周期mounted函数中调用,确保dom已经被创建**
    
    		(1)初始化地图对象
    			let myMap=echarts.init(document.querySelector('有高宽的容器'));
    			
    		(2)设置地图配置信息
    			     var option = {
    	                title: {
    	                     text: 'ECharts 入门示例'
    	                 },
    	                 tooltip: {},
    	                 legend: {
    	                     data:['销量']
    	                 },
    	                 xAxis: {
    	                     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    	                 },
    	                 yAxis: {},
    	                 series: [{
    	                     name: '销量',
    	                     type: 'bar',
    	                     data: [5, 20, 36, 10, 10, 20]
    	                 }]
    	             };
    	             
    	      (3)地图使用配置信息
    	      		myMap.setOption(option);

代码示例:

<template>
      <div id="app">
    
        
        <div class='map'>
    
    
        </div>
    
      </div>
    </template>
    
    <script>
     import echarts from 'echarts'
    
    export default { 
      name: 'App',
      data(){ 
        return { 
    
        }
      },
      mounted:function(){ 
         var myMap=echarts.init(document.querySelector('.map'));
         var option = { 
                     title: { 
                         text: 'ECharts 入门示例'
                     },
                     tooltip: { },
                     legend: { 
                         data:['销量']
                     },
                     xAxis: { 
                         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                     },
                     yAxis: { },
                     series: [{ 
                         name: '销量',
                         type: 'bar',
                         data: [5, 20, 36, 10, 10, 20]
                     }]
                 };
    
             myMap.setOption(option);
    
      }
    }
    </script>
    
    <style lang='less'>
    *{ 
      margin:0px;
      padding: 0px;
       box-sizing: border-box;
    }
    .map{ 
      height: 500px;
      width: 500px;
      margin: 0 auto;
    }
    </style>