一、搭建项目
注：如果使用的是vue-cli的老版本(4.20以下的)建议使用以下命令升级vue-cli版本
npm uninstall vue-cli -g
npm uninstall @vue-cli -g
1、选择路径创建项目
vue create vue-mychart
随后出现一些配置选项，选择Manually select features进行配置
2、选择预配置项
选择Router、Vuex、CSS Pre-processors、Linter / Formatter
3、是否使用路由的history模式
可以选也可以不选，之后可以改的，我选择不选
4、选择一个预处理语言
选with node-sass就行
5、选择ESLint自动化代码格式化检测
从上到下分别是：只预防、airbnb配置、标注配置、最高配置
作为学习选择只预防就可以了选择回车下一步
6、选择代码检测时机，选择保存时检测
下一步就好了
7、将配置文件放到pakage.json中还是单独文件中
选择pakage.json即可
8、是否保存选择的配置
这里不保存选n
安装成功后显示如下
随后进入文件夹
运行项目就可以了
npm run serve
yarn serve
二、使用echarts实现疫情地图
1、安装echarts默认是最新版本，我试了好多版本怎么都不行，这里我查了网上资料使用 ^4.7.0 的版本就可以显示
终端键入
npm install echarts --save
如果失败，并看到
则键入来修复
npm audit fix
成功后可以在package.json内看到echarts对应的版本号
2、封装自定义组件与配置路由
- 在
router文件下的index.js里配置自定义组件chart.vue对应的路由
- 在
App.vue中配置路由跳转
- 在
view文件夹下新建一个自定义组件chart.vue MapChart.vue
3、在chart.vue中进行使用echarts
- 引入echarts
import echarts from 'echarts' //引入echarts
- 准备一个DOM容器
- 使用钩子函数，挂载完成之后执行
init
- 编写
init方法
chart完整代码如下
<template>
<div class="chart">
<div id="mychart1" style="100%;height: 300px"></div>
</div>
</template>
<script>
import echarts from 'echarts' //引入echarts
export default {
data () {
return {
mychart: ''
}
},
mounted () {
this.init()
},
methods: {
init () {
const myecharts = echarts.init(document.getElementById('mychart1'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
// 使用刚指定的配置项和数据显示图表。
myecharts.setOption(option);
}
}
}
</script>
<style lang="scss" scoped>
</style>
4、显示效果
三、第二种地图显示方法
1、安装jsonp
npm install jsonp
2、封装自定义组件与配置路由
和上一种方法类似，不赘述
3、新建chinaMap.vue中进行使用echarts
附上源代码
<template>
<div id="mapchart" style=" 100%; height: 600px;"></div>
</template>
<script>
import jsonp from 'jsonp';
import echarts from 'echarts'
import 'echarts/map/js/china';
const option = {
title: {
text: '疫情地图',
show: true,
x: 'center',
top: '5%',
textStyle: {
color: '#e74c3c',
fontStyle: 'normal',
fontFamily: 'Microsoft YaHei'
}
},
tooltip: {
// 鼠标移入时的提示信息
// 类型
tigger: 'item',
// b 区域名称 c 合并数值 a 系列名称
formatter: '地区：{b}<br/>确诊：{c} '
},
series: [
{
type: 'map',//地图类型
map: 'china',//地图名字（与导入文件名字一致
layoutCenter: ['50%', '50%'],//定义地图中心在屏幕中的位置
layoutSize: 650,
label: {
show: true,
color: '#000',
fontSize: '10px'
},
itemStyle: {
borderColor: '#b1b1b1'
},
// data: [
// {name: '湖北', value: 20057},
// {name: '福建', value: 1547},
// {name: '黑龙江', value: 316},
// {name: '西藏', value: 69},
// {name: '甘肃', value: 4},
// ],
//data:Map.dataList,//(data数组动态绑定Map实例中的dataList,但是俺整不出来呜呜)
zoom: 1,
emphasis: {
lable: {
color: '#fff',
fontSize: '10px'
},
itemStyle: {
areaColor: '#c7fffd'
}
}
}
],
visualMap: {
type: 'piecewise',
pieces: [
{ min: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
{ min: 1000, max: 9999 },
{ min: 100, max: 999 },
{ min: 10, max: 99 },
{ min: 0, max: 9 }
],
inRange: {
color: ['#fff', '#ffaa85', '#ff7b69', '#cc2929', '#8c0d0d', '#660208']
},
itemWidth: 10,
itemHeight: 10,
bottom: '15%',
left: '10%'
}
}
export default {
data () {
return {
mycharts: '',
}
},
mounted () {
this.mycharts = echarts.init(document.getElementById('mapchart'))
this.init()
},
methods: {
init () {
// 使用新浪疫情数据接口获取数据
jsonp(
'http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',
(err, data) => {
//console.log(data.data.list);
const list = data.data.list.map(item => {
return {
name: item.name,
value: item.value
}
})
// 将数据给到地图
option.series[0].data = list;
this.mycharts.setOption(option);
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
效果如下：
