Echarts系列(二):vue2.0使用echarts3&&实现中国地图&&字符云

一、vue使用Echarts流程

1. 首先打开vue项目，cmd进入命令安装echarts依赖包，默认下载最新版本

   npm install echarts --save
   或者
   cnpm install echarts --save   ---建议使用第二种，国内毕竟比国外下载要快
   

2. 进入src目录里的main.js全局引入echarts，这样就可以在任何组件中使用了

   import Echarts from 'echarts'		// 引入 Echarts
   
   Vue.prototype.$echarts = Echarts	// 给Vue原型上挂载 Echarts
   

3. 在组件中去创建一个容器，比如说div，必须设置宽高，不然的话图表显示不出，然后在methods中定义一个方法来封装配置的图表，最后在mounted钩子函数内调用即可。话不多说，直接上代码

   <template>
       <div class="home">
         <!-- 柱状图为例，给div绑定ref，可以获取到当前dom元素本身，跟原生获取没什么区别 -->
         <h2>柱状图</h2>
         <div
           class="charts"
           ref="bar"
           style="width: 600px;height:400px;"
         ></div>
       </div>
   </template>
   
   <script>
   export default {
     name: 'Home',
     data () {
       return {
       }
     },
     mounted () {
       // 调用了methods中的bar方法
       this.bar()	
     },
     methods:{
          // 柱状图
       bar () {
         // 初始化echarts实例，init参数为要绑定的dom元素，通过this.$refs方法获取dom
         let myChart = this.$echarts.init(this.$refs.bar)
         
         // 指定图表的配置项和数据
         let option = {
               title: {
               	text: 'ECharts 入门示例'
               },
               tooltip: {},
               legend: {
                   data:['销量']
               },
               xAxis: {
                   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
               },
               yAxis: {},
               series: [{
                   name: '销量',
                   type: 'bar',
                   data: [5, 20, 36, 10, 10, 20]
               }]
         };
           
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option)
       },
     }
   }
   </script>
   
   <style scoped>
       .home {
     		width: 100%;
     		height: 100%;
   	}
   </style>
   

二、Vue通过Echarts3.0使用中国地图

1. 在组件中局部引入 或者 main.js中全局引入china.js

   import 'echarts/map/js/china.js'
   

2. 除了这一步操作，其他跟上边操作一样，option配置项改成地图就行，代码：

   let option = {
        
           title: {
        
             text: '订单量',
             subtext: '纯属虚构',
             x: 'center'
           },
           tooltip: {
        
             trigger: 'item'
           },
           legend: {
        
             orient: 'vertical',
             x: 'left',
             data: ['订单量']
           },
           dataRange: {
        
             x: 'left',
             y: 'bottom',
             splitList: [
               {
         start: 1500 },
               {
         start: 900, end: 1500 },
               {
         start: 310, end: 1000 },
               {
         start: 200, end: 300 },
               {
         start: 10, end: 200, label: '10 到 200（自定义label）' },
               {
         start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black' },
               {
         end: 10 }
             ],
             color: ['#E0022B', '#E09107', '#A3E00B']
           },
           toolbox: {
        
             show: true,
             orient: 'vertical',
             x: 'right',
             y: 'center',
             feature: {
        
               mark: {
         show: true },
               dataView: {
         show: true, readOnly: false },
               restore: {
         show: true },
               saveAsImage: {
         show: true }
             }
           },
           roamController: {
        
             show: true,
             x: 'right',
             mapTypeControl: {
        
               'china': true
             }
           },
           series: [
             {
        
               name: '订单量',
               type: 'map'