一、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)]
感谢观看！！！