您的位置：首页 > Web前端 > Vue.js

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

2020-06-23 04:35 791 查看

一、vue使用Echarts流程

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

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

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

import Echarts from 'echarts'		// 引入 Echarts

Vue.prototype.$echarts = Echarts	// 给Vue原型上挂载 Echarts

在组件中去创建一个容器，比如说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使用中国地图

在组件中局部引入或者 main.js中全局引入china.js
```
import 'echarts/map/js/china.js'
```

除了这一步操作，其他跟上边操作一样，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',
mapType: 'china',
roam: false,
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis: { label: { show: true } }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 2000) },
{ name: '天津', value: Math.round(Math.random() * 2000) },
{ name: '上海', value: Math.round(Math.random() * 2000) },
{ name: '重庆', value: Math.round(Math.random() * 2000) },
{ name: '河北', value: 0 },
{ name: '河南', value: Math.round(Math.random() * 2000) },
{ name: '云南', value: 5 },
{ name: '辽宁', value: 305 },
{ name: '黑龙江', value: Math.round(Math.random() * 2000) },
{ name: '湖南', value: 200 },
{ name: '安徽', value: Math.round(Math.random() * 2000) },
{ name: '山东', value: Math.round(Math.random() * 2000) },
{ name: '新疆', value: Math.round(Math.random() * 2000) },
{ name: '江苏', value: Math.round(Math.random() * 2000) },
{ name: '浙江', value: Math.round(Math.random() * 2000) },
{ name: '江西', value: Math.round(Math.random() * 2000) },
{ name: '湖北', value: Math.round(Math.random() * 2000) },
{ name: '广西', value: Math.round(Math.random() * 2000) },
{ name: '甘肃', value: Math.round(Math.random() * 2000) },
{ name: '山西', value: Math.round(Math.random() * 2000) },
{ name: '内蒙古', value: Math.round(Math.random() * 2000) },
{ name: '陕西', value: Math.round(Math.random() * 2000) },
{ name: '吉林', value: Math.round(Math.random() * 2000) },
{ name: '福建', value: Math.round(Math.random() * 2000) },
{ name: '贵州', value: Math.round(Math.random() * 2000) },
{ name: '广东', value: Math.round(Math.random() * 2000) },
{ name: '青海', value: Math.round(Math.random() * 2000) },
{ name: '西藏', value: Math.round(Math.random() * 2000) },
{ name: '四川', value: Math.round(Math.random() * 2000) },
{ name: '宁夏', value: Math.round(Math.random() * 2000) },
{ name: '海南', value: Math.round(Math.random() * 2000) },
{ name: '台湾', value: Math.round(Math.random() * 2000) },
{ name: '香港', value: Math.round(Math.random() * 2000) },
{ name: '澳门', value: Math.round(Math.random() * 2000) }
]
}
]
};

这样就实现了中国地图的使用，因为你会发现在官网上已经见不到中国地图实例了，效果如下：

三、Vue通过Echarts3.0使用词云（字符云）

因为现在echarts官网上已经找不到有词云了，等于3.0版本之后已经取消这类图表，但是有些需求，我必须要使用词云，怎么办呢？可以下载插件，然后引入

npm install echarts-wordcloud -D		// 下载依赖到生产环境

// 下载完成后，去在当前组件局部或main.js中全局引入
import "echarts-wordcloud/dist/echarts-wordcloud.js";
import "echarts-wordcloud/dist/echarts-wordcloud.min.js";

引入以后还是一样，把option配置项改成词云图，就可以了，这里提供一份配置:

// 字符云
wordCloud () {
let myChart = this.$echarts.init(this.$refs.wordCloud)
// 这个是返回的一个随机颜色，调用到了potion配置里
function createRandomItemStyle () {
return {
normal: {
color: 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
};
}
let option = {
title: {
text: 'Google Trends',
link: 'http://www.google.com/trends/hottrends',
left: 'center'
},
tooltip: {
show: true
},
series: [{
name: 'Google Trends',
type: 'wordCloud',
size: ['80%', '80%'],
textRotation: [0, 45, 90, -45],
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
data: [
{
name: "Sam S Club",
value: 10000,
itemStyle: {
normal: {
color: 'black'
}
}
},
{
name: "Macys",
value: 6181,
itemStyle: createRandomItemStyle()
},
{
name: "Amy Schumer",
value: 4386,
itemStyle: createRandomItemStyle()
},
{
name: "Jurassic World",
value: 4055,
itemStyle: createRandomItemStyle()
},
{
name: "Charter Communications",
value: 2467,
itemStyle: createRandomItemStyle()
},
{
name: "Chick Fil A",
value: 2244,
itemStyle: createRandomItemStyle()
},
{
name: "Planet Fitness",
value: 1898,
itemStyle: createRandomItemStyle()
},
{
name: "Pitch Perfect",
value: 1484,
itemStyle: createRandomItemStyle()
},
{
name: "Express",
value: 1112,
itemStyle: createRandomItemStyle()
},
{
name: "Home",
value: 965,
itemStyle: createRandomItemStyle()
},
{
name: "Johnny Depp",
value: 847,
itemStyle: createRandomItemStyle()
},
{
name: "Lena Dunham",
value: 582,
itemStyle: createRandomItemStyle()
},
{
name: "Lewis Hamilton",
value: 555,
itemStyle: createRandomItemStyle()
},
{
name: "KXAN",
value: 550,
itemStyle: createRandomItemStyle()
},
{
name: "Mary Ellen Mark",
value: 462,
itemStyle: createRandomItemStyle()
},
{
name: "Farrah Abraham",
value: 366,
itemStyle: createRandomItemStyle()
},
{
name: "Rita Ora",
value: 360,
itemStyle: createRandomItemStyle()
},
{
name: "Serena Williams",
value: 282,
itemStyle: createRandomItemStyle()
},
{
name: "NCAA baseball tournament",
value: 273,
itemStyle: createRandomItemStyle()
},
{
name: "Point Break",
value: 265,
itemStyle: createRandomItemStyle()
}
]
}]
};
myChart.setOption(option)
},

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0Z3qfn3-1590854617559)(https://user-gold-cdn.xitu.io/2020/5/30/172664cdd8342140?w=792&h=512&f=png&s=35875)]

感谢观看！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航