vue.js入门以及和echarts整合之柱状图和中国地图

1.去官网下载node.js
2. vue init webpack my-vue 命令行创建vue 项目
3. cd my-vue npm install 构建项目，npm run dev 启动项目
4. router 下的，index.js 为：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import China from '@/components/China'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/China',
      name:'China',
      component:China
    }
  ]
})

5. main.js 为：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'
import VueAxios from 'vue-axios'

//Vue.use(VueAxios, axios)

Vue.prototype.$axios = axios;

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 还要特别引入china.json，这样中国地图才会出现，不然只会出现右下角的南海诸岛

import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6. component 中的文件有：
   China.vue

<template>
  <div class="chinaMap">
    <div ref="MapMountNode" style="width:1000px;height:800px"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    },
    methods: {
      resize() {
        this.MapMountNode.resize();
      }
    },
    mounted() {
      this.$axios.get("http://172.16.1.133:8007/report/tradeMarkProvinceAll",{}).then(res=>{
          //console.log(res.data)
          console.log(res.data.result)
          console.log(res.data.result['provinceCount'][0])

          var dataArray = res.data.result['provinceCount']

          var data2 =[];

          for(var i = 0; i< dataArray.length ;i++){
            //  this.xdata.push(dataArray[i].province)
            // this.ydataAllCount.push(dataArray.allCount)

            var  outObj = {}
            outObj.name = dataArray[i].province
            if(dataArray[i].allCount == undefined){
              outObj.value =0
            }else{
              outObj.value =dataArray[i].allCount
            }
            data2.push(outObj)
          }

console.log('data2 ' ,data2 )


        this.$nextTick(() => {


          var data = data2;

          console.log('data ' ,data)


          var data3 =[];
          var data3 = [
            {
              name: "北京",
              value: 5.3
            },
            {
              name: "天津",
              value: 3.8
            },
            {
              name: "上海",
              value: 4.6
            },
            {
              name: "重庆",
              value: 3.6
            },
            {
              name: "河北",
              value: 3.4
            },
            {
              name: "河南",
              value: 3.2
            },
            {
              name: "云南",
              value: 1.6
            },
            {
              name: "辽宁",
              value: 4.3
            },
            {
              name: "黑龙江",
              value: 4.1
            },
            {
              name: "湖南",
              value: 2.4
            },
            {
              name: "安徽",
              value: 3.3
            },
            {
              name: "山东",
              value: 3.0
            },
            {
              name: "新疆",
              value: 1
            },
            {
              name: "江苏",
              value: 3.9
            },
            {
              name: "浙江",
              value: 3.5
            },
            {
              name: "江西",
              value: 2.0
            },
            {
              name: "湖北",
              value: 2.1
            },
            {
              name: "广西",
              value: 3.0
            },
            {
              name: "甘肃",
              value: 1.2
            },
            {
              name: "山西",
              value: 3.2
            },
            {
              name: "内蒙古",
              value: 3.5
            },
            {
              name: "陕西",
              value: 2.5
            },
            {
              name: "吉林",
              value: 4.5
            },
            {
              name: "福建",
              value: 2.8
            },
            {
              name: "贵州",
              value: 1.8
            },
            {
              name: "广东",
              value: 3.7
            },
            {
              name: "青海",
              value: 0.6
            },
            {
              name: "西藏",
              value: 0.4
            },
            {
              name: "四川",
              value: 3.3
            },
            {
              name: "宁夏",
              value: 0.8
            },
            {
              name: "海南",
              value: 1.9
            },
            {
              name: "台湾",
              value: 0.1
            },
            {
              name: "香港",
              value: 0.1
            },
            {
              name: "澳门",
              value: 0.1
            }
          ];

          console.log('data3 ' ,data3)

          var yData = [];

          data.sort(function(o1, o2) {
            if (isNaN(o1.value) || o1.value == null) return -1;
            if (isNaN(o2.value) || o2.value == null) return 1;
            return o1.value - o2.value;
          });

          for (var i = 0; i < data.length; i++) {
            yData.push(data[i].name);
          }
          let option = {
            title: {
              text: "中国地图",
              textStyle: {
                fontSize: 30
              },
              x: "center"
            },
            tooltip: {
              show: true,
              formatter: function(params) {
                return params.name + "：" + params.data["value"] + "%";
              }
            },
            visualMap: {
              type: "continuous",
              text: ["", ""],
              showLabel: true,
              seriesIndex: [0],
              min: 0,
              max: 7,
              inRange: {
                color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"]
              },
              textStyle: {
                color: "#000"
              },
              bottom: 30,
              left: "left"
            },
            grid: {
              right: 10,
              top: 80,
              bottom: 30,
              width: "20%"
            },
            xAxis: {
              type: "value",
              scale: true,
              position: "top",
              splitNumber: 1,
              boundaryGap: false,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 2,
                textStyle: {
                  color: "#aaa"
                }
              }
            },
            yAxis: {
              type: "category",
              nameGap: 16,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#ddd"
                }
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: "#ddd"
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: "#999"
                }
              },
              data: yData
            },
            geo: {
              roam: true,
              map: "china",
              left: "left",
              right: "300",
              layoutSize: "80%",
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  areaColor: "#fff464"
                }
              },
              regions: [
                {
                  name: "南海诸岛",
                  value: 0,
                  itemStyle: {
                    normal: {
                      opacity: 0,
                      label: {
                        show: false
                      }
                    }
                  }
                }
              ]
            },
            series: [
              {
                name: "mapSer",
                type: "map",
                roam: false,
                geoIndex: 0,
                label: {
                  show: false
                },
                data: data
              },
              {
                name: "barSer",
                type: "bar",
                roam: false,
                visualMap: false,
                zlevel: 2,
                barMaxWidth: 20,
                itemStyle: {
                  normal: {
                    color: "#40a9ed"
                  },
                  emphasis: {
                    color: "#3596c0"
                  }
                },
                label: {
                  normal: {
                    show: false,
                    position: "right",
                    offset: [0, 10]
                  },
                  emphasis: {
                    show: true,
                    position: "right",
                    offset: [10, 0]
                  }
                },
                data: data
              }
            ]
          };
          this.MapMountNode = this.$echarts.init(
            this.$refs.MapMountNode
          );
          this.MapMountNode.setOption(option);
          // on(window, 'resize', this.resize)
        });
     });

    },
    beforeDestroy() {
      off(window, "resize", this.resize);
    }
  };
</script>

helloWord.vue

<template>
<div id="myChart" :style="{width: '1400px', height: '400px'}"></div>

</template>

<script>


export default {


    name: 'hello',
     data () {
        return {

        }
    },
    created:function(){
    },
    mounted(){
      this.drawLine();
    },
    methods: {
    drawLine(){

      this.$axios.get("http://172.16.1.133:8007/report/tradeMarkProvinceAll",{}).then(res=>{
        //console.log(res.data)
        console.log(res.data.result)
        console.log(res.data.result['provinceCount'][0])

        var dataArray = res.data.result['provinceCount']

        let xdata = [];
        let ydataAll =[];
        for(var i = 0; i< dataArray.length ;i++){
        //  this.xdata.push(dataArray[i].province)
         // this.ydataAllCount.push(dataArray.allCount)

          //outObj.xdata = dataArray[i].province
         // outObj.ydataAllCount =dataArray[i].allCount
         
          xdata.push(dataArray[i].province)
          ydataAll.push(dataArray[i].allCount)

        }

       // console.log("xdata" ,xdata)

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: { text: '测试' },
          tooltip: {},
          xAxis: {
            data: xdata,
            axisLabel:{
              interval: 0,
              formatter: function (value) {
                //x轴的文字改为竖版显示
                var str = value.split("");
                return str.join("\n");
              }
            }
          },
          yAxis: {},
          series: [{
            name: '商标注册数',
            type: 'bar',
            data: ydataAll
          }]
        });

      });
 }
 }
}

</script>