基于webpack的vue项目快速引入echart统计图及中国地图轮播实现（以npm方式引入）_原生js 实现大屏中国地图 轮播tip

1.vue项目引入echart统计图

1.创建一个项目
vue init webpack 项目名
2. 通过 npm 获取 echarts
cnpm install echarts --save
3.自动化导入项目所需依赖
cnpm install

4.在main.js中：// 全局引入echarts模块，也可以按需引入（官方文档有）

import echarts from 'echarts' 
Vue.prototype.$echarts = echarts
1
2

5.在需要引入echart的vue页面中的里写个div：

<div id="myChart" style="width: 100%;height:400px;"></div>
1

6.在需要引入echart的vue页面中的script标签里写代码：

<script>
var echarts = require('echarts/lib/echarts');
export default {
  name: 'App',
   mounted() {
    this.echart();
   },
   methods: {
   echart(){
     var myChart = echarts.init(document.getElementById('myChart'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
   }
   },
    created () {
	
	},
	watch: {
	
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

实现效果：

2.中国地图轮播实现

重复上面步骤1.2.3，创建项目并且引入echart及相关依赖，然后：

1.放置一个div

 <div id="chinaMap" :style="{height:'700px',width:'100%'}" ref="myEchart"></div>
1

2.script标签里引入中国地图数据

require('echarts/map/js/china') 
1

3.在methods里写一个方法：

   chinamap(){
    var myChart = echarts.init(document.getElementById("chinaMap"));
      
		var option= {
        backgroundColor: '#ccc',  //设置背景颜色
        title: {
            show:true,
            text: '中国地图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show : true,
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 10, end:20},
                {start: 6, end: 10},
                {start: 0, end: 6},
            ],
            color: ['#a5ad00', '#8bdd00', '#2cd493']
        },
        //配置属性
        series: [{
            name: '数量',
            type: 'map',
            mapType: 'china',
            roam: true,
            zoom:1.2,
            label: {
                normal: {
                    show: true ,
                },
                emphasis: {
                    show: false
                }
            },
            data:[{name: '北京',value:randomData() },{name: '天津',value: randomData() },
                {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },{name: '河南',value: randomData() },
                {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
                {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
                {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
                {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
                {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
                {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
                {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
                {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
                {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
                {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
                {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },{name: '澳门',value: randomData() }]
        }]
    };

                    var count = 0;
                    setInterval(function() {
                    
                    var curr = count % 34;
                 //  console.info("curr:"+curr);
                
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                
                    });
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: curr
                    });



                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0, // 因为只有一组数据，所以此处应为0
                        dataIndex: curr
                    });
                    count += 1;
           
      
                }, 500);



    /**
     *  使用刚指定的配置项和数据显示图表。
     *  */
    myChart.setOption(option);
    //获取随机数
    function randomData() {
        return Math.round(Math.random()*(12-1)+1)
    }

   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

4.mounted里调用这个方法：

this.chinamap();
1

5.实现效果：