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/>'
})

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].provinceif(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].allCountxdata.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>

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

echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了在 webpack 中使用 EChar ...
js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...
一个Java程序猿眼中的前后端分离以及Vue.js入门
原文:https://mp.weixin.qq.com/s/HWRYAR16vLE1XFep6_i1tA 松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的, ...
vue.js 入门，简介
vue的源代码下载--开发版本和生产版本 https://cn.vuejs.org/js/vue.js https://cn.vuejs.org/js/vue.min.js vue中文学习官网 htt ...
Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...
【一文学会】vue.js入门到放弃
最近正好学习了vue.js就准备将此记录下来,希望能给各位做个参考,当然因为技术有限所以出现很多错误,烦请大佬们能够不吝赐教,此篇博客会一直保持更新,以后关于vue就在本篇博文上填加内容了. VueJ ...

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

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

最新文章

热门文章