Echarts+Vue3.0 学习（大数据可视化）
什么是数据可视化数据可视化的展现形式数据可视化作用2.1什么是数据可视化？数据可视化，是关于数据视觉表现形式的科学技术研究2.2 数据可视化的展现形式？数据可视化有众多展现方式，不同的数据类型要选择合适的展现方法。2.3 数据可视化作用数据可视化的意义是帮助人更好的分析数据可视化增加数据的灵性3.1 特点1.丰富的可视化类型2.多数据格式无需转换3.千万级别的数据进行展示4.移动端优化5.多渲染
·
一.介绍
1.课程介绍与目标
Echarts5.0的基本使用 项目express后端搭建 Vue3.0项目实施 阿里云与Nginx项目上线
2. 数据可视化介绍
什么是数据可视化 数据可视化的展现形式 数据可视化作用
2.1什么是数据可视化？
数据可视化，是关于数据视觉表现形式的科学技术研究
2.2 数据可视化的展现形式？
数据可视化有众多展现方式，不同的数据类型要选择合适的展现方法。
echarts官网：Examples - Apache ECharts
2.3 数据可视化作用
数据可视化的意义是帮助人更好的分析数据 可视化增加数据的灵性
3.Echarts -- 商业级数据图表介绍
3.1 特点
1.丰富的可视化类型 2.多数据格式无需转换 3.千万级别的数据进行展示 4.移动端优化 5.多渲染方案跨平台使用 6.深度的交互方案 7.动态数据 8.绚丽的特效
二. Echarts 初体验
1. HelloWord 初体验
步骤： 1.先搭建vue2.0的项目 2.下载安装echarts npm install --save echarts 3.在view/About.vue的下修改代码
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
const myEcharts = echarts.init(this.$refs.mycharts)
// 设置参数
myEcharts.setOption({
title: { // echarts标题
text: 'Hello Echarts'
},
xAxis: {
data: ['胡歌', '林依晨', '地瓜', '小七']
},
yAxis: {
},
series: { // 系列：设置当前数据可映射的图形
name: '天外飞仙',
type: 'bar',
data: [520, 1314, 1024, 8888]
}
})
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
运行代码时报错
✖ 27 problems (27 errors, 0 warnings) 27 errors and 0 warnings potentially fixable with the `--fix` option.
解决方法
终端运行 npm run lint --fix
结果展示：
2. 配置项
2.1 title配置
网址：Documentation - Apache ECharts
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
const myEcharts = echarts.init(this.$refs.mycharts)
// 设置参数
myEcharts.setOption({
title: { // 设置图表的标题
text: '主标题',
link:'http://www.baidu.com',
target:"self",//当前页打开超链接
backgroundColor:'green',//设置背景颜色
borderColor:"yellow",//设置边框颜色
borderWidth:3,
x:'center',
subtext:"副标题",
sublink:"http://www.baidu.com",//副标题超链接
textStyle:{
color:"blue",
fontSize:30
}
},
xAxis: {
data: ['胡歌', '林依晨', '地瓜', '小七']
},
yAxis: {
},
series: { // 系列：设置当前数据可映射的图形
name: '天外飞仙',
type: 'bar',
data: [520, 1314, 1024, 8888]
}
})
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
报错
ERROR in [eslint]
解决方法：在vue.config.js添加 lintOnSave: false
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
结果
2.2 tooltip 配置
网址：Documentation - Apache ECharts
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
const myEcharts = echarts.init(this.$refs.mycharts)
// 设置参数
myEcharts.setOption({
title: { // 设置图表的标题
text: '少年杨家将',
},
tooltip:{
//可以不设置，将显示系列的数据
//也可以设置触发类型
trigger:"axis",//item图形触发 axis坐标轴触发
//坐标轴指示器
axisPointer:{
type:"cross"//默认显示line 显示一个实线 shadow阴影效果 cross十字准星
},
// showContent:false
//悬浮层样式
backgroundColor:"yellow",
borderColor:"green",
borderWidth:"2",
textStyle:{
color:"red"
},
//自定义的提示框信息
formatter(params){
console.log(params)
for(let i=0;i<params.length;i++){
return "名字:"+params[i].name+"\n身高:"+params[i].data.value+"\n年龄:"+params[i].data.age
}
}
},
xAxis: {
data: ['胡歌', '彭于晏', '何润东', '刘诗诗']
},
yAxis: {
// type:'height'
},
series: { // 系列：设置当前数据可映射的图形
name: '少年杨家将演员',
type: 'bar',
data: [
{"value":"185","age":"39"},
{"value":"182","age":"40"},
{"value":"186","age":"46"},
{"value":"165","age":"35"}
]
// data: [520, 1314, 1024, 8888]
}
})
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
注意在这边对象中的第一个值只能命名为value，不然柱状图不显示
结果展示
2.3 legend配置
网址：Documentation - Apache ECharts
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
const myEcharts = echarts.init(this.$refs.mycharts)
// 设置参数
myEcharts.setOption({
title: { // 设置图表的标题
text: '商品',
},
tooltip:{
},
legend:{
show:true,//设置图例的开启或者是关闭
icon:"circle",//设置图标形状
top:"5%",//图例位置
//图例宽高
itemWidth:10,
itemHeight:10,
textStyle:{
color:"red",
fontSize:15,
backgroundColor:"yellow"
}
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子',"高跟鞋","袜子"]
},
yAxis: {
// type:'height'
},
series: { // 系列：设置当前数据可映射的图形
name: '销量',
type: 'bar',
data: [5,20,36,10,10,20]
// data: [520, 1314, 1024, 8888]
}
})
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
三.Echarts统计图及部分效果介绍
1.柱状图
1.1 柱状图基本设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
yAxis:{
//配置y轴的参数
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
data:yData
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
绘制结果
1.2 柱状图更多效果
网址：Documentation - Apache ECharts
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
yAxis:{
//配置y轴的参数
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
data:yData,
//最大值/最小值
markPoint:{
data:[
//标注的数据数组，每一个都是一个对象
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
//图标的标线
markLine:{
data:[
{
type:"average",//平均值
name:"平均值"
},
]
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
1.3 水平柱状图
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
type:"value"
},
yAxis:{
//配置y轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
barWidth:20,//设置宽度
// color:"green",//设置轴的颜色
itemStyle:{
normal:{
color:function(params){
let colorList=['pink','red',"green","blue","yellow"]
return colorList[params.dataIndex]
}
}
},
data:yData,
//最大值/最小值
markPoint:{
data:[
//标注的数据数组，每一个都是一个对象
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
//图标的标线
markLine:{
data:[
{
type:"average",//平均值
name:"平均值"
},
]
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
2. 饼状图
2.1饼状图基本设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let data=[
{value:67,name:"美食"},
{value:44,name:"运动"},
{value:88,name:"摄影"},
{value:32,name:"电影"},
{value:53,name:"阅读"}
]
let option={
title:{
text:"饼状图",
left:"center"
},
legend:{
left:"left",
//图例的布局朝向
orient:"verical"
},
series:[
{
name:"销量统计",
type:'pie',//设置为饼状图
data
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
2.2 饼状图更多设置
2.2.1 环形图设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let data=[
{value:67,name:"美食"},
{value:44,name:"运动"},
{value:88,name:"摄影"},
{value:32,name:"电影"},
{value:53,name:"阅读"}
]
let option={
title:{
text:"饼状图",
left:"center"
},
legend:{
left:"left",
//图例的布局朝向
orient:"verical"
},
series:[
{
name:"销量统计",
type:'pie',//设置为饼状图
data,
radius:["40%","70%"],//设置饼图的半径 第一项内半径 第二项外半径 设置环形图
//设置环形图的文本标签
label:{
show:true,
position:"inside"//outside 外侧展示 inside 内展示 center 中心展示
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
2.2.2 南丁格尔图设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
// let data=[
// {value:67,name:"美食"},
// {value:44,name:"运动"},
// {value:88,name:"摄影"},
// {value:32,name:"电影"},
// {value:53,name:"阅读"}
// ]
let data=[
{value:67,name:"美食",itemStyle:{normal:{color:"green"}}},
{value:44,name:"运动",itemStyle:{normal:{color:"yellow"}}},
{value:88,name:"摄影",itemStyle:{normal:{color:"pink"}}},
{value:32,name:"电影",itemStyle:{normal:{color:"gray"}}},
{value:53,name:"阅读",itemStyle:{normal:{color:"blue"}}}
]
let option={
title:{
text:"饼状图",
left:"center"
},
legend:{
left:"left",
//图例的布局朝向
orient:"verical"
},
series:[
{
name:"销量统计",
type:'pie',//设置为饼状图
data,
radius:["40%","70%"],//设置饼图的半径 第一项内半径 第二项外半径 设置环形图
//设置环形图的文本标签
label:{
show:true,
position:"inside"//outside 外侧展示 inside 内展示 center 中心展示
},
roseType:"area", //是否设置为南丁格尔图
itemStyle:{
color:"#c23531",
shadowBlur:200,
shadowColor:"reba(0,0,0,.5)"
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
3. 折线图
3.1 折线图基本设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let data=[150, 230, 224, 218, 135, 147, 260]
//设置配置项
let option={
xAxis:{
type: 'category',
data:xData
},
yAxis:{
type:"value"
},
series:[
{
type:'line',//设置为折线图
data,
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
3.2 折线图更多设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let data=[50, 230, 24, 218, 135, 147, 260]
//设置配置项
let option={
xAxis:{
type: 'category',
data:xData
},
yAxis:{
type:"value"
},
series:[
{
type:'line',//设置为折线图
data,
smooth:true,//开启平滑的过渡
areaStyle:{},//设置面积
markPoint:{//获取最大值/最小值
data:[
{type:"max",name:"最大值"},
{type:"min",name:"最小值"}
]
},
markLine:{
data:[
{
type:"average",name:"平均值"
}
]
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
3.3 折线图堆叠效果
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let dataA=[50, 230, 24, 218, 135, 147, 260]
let dataB=[180, 20, 224, 118, 125, 125, 148]
let dataC=[135, 147, 260, 288, 136, 47, 160]
let dataD=[30, 280, 224, 48, 175, 247, 360]
//设置配置项
let option={
xAxis:{
type: 'category',
data:xData
},
yAxis:{
type:"value"
},
series:[
{
name:"美食",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataA,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
{
name:"日化",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataB,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
{
name:"摄影",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataC,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
{
name:"插花",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataD,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
4. 散点图
4.1 散点图基本效果展示
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let dataA=[50, 230, 24, 218, 135, 147, 260]
let dataB=[180, 20, 224, 118, 125, 125, 148]
let dataC=[135, 147, 260, 288, 136, 47, 160]
let dataD=[30, 280, 224, 48, 175, 247, 360]
//设置配置项
let option={
xAxis:{}
,
yAxis:{
},
series:[{
type:"scatter",//散点图
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
4.2 散点图效果实现
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let dataA=[50, 230, 24, 218, 135, 147, 260]
let dataB=[180, 20, 224, 118, 125, 125, 148]
let dataC=[135, 147, 260, 288, 136, 47, 160]
let dataD=[30, 280, 224, 48, 175, 247, 360]
//设置配置项
let option={
xAxis:{}
,
yAxis:{
},
tooltip:{},
series:[{
symbolSize:20,
type:"scatter",//散点图
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
//图形的样式
//color:"red"
color:{
//线性渐变
type:"linear",
//相当于在图形包围盒中的百分比
x:0,
y:0,
x2:1,
y2:0,
colorStops:[
{
offset:0,
color:"#00ccff"
},
{
offset:1,
color:"rgba(255,173,25,.9)"
}
]
},
emphasis:{
//高亮设置
itemStyle:{
borderColor:"rgba(100,200,50,.5)",
borderWidth:30
}
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
5. 配置项grid
网址：Documentation - Apache ECharts
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
yAxis:{
//配置y轴的参数
},
grid:{
//显示内部图标容器的边框
show:true,
//设置内部图标容器距离外部边框的距离
left:"20%",
top:"20%",
right:"20%",
bottom:"20%",
backgroundColor:"gray",
borderColor:"green"
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
data:yData
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
6. k线图
6.1k线图基本设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置配置项
let option={
xAxis:{//配置x轴的参数
data:['日化','蔬菜',"电器","美妆"]
},
yAxis:{
//配置y轴的参数
},
series:[//系列 配置图标的类型
{
type:"candlestick",//设置k线图的类别
data:[
[20,34,10,38],
[40,35,30,50],
[31,38,33,44],
[38,15,5,42]
]
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
6.2 k线图效果优化
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
data(){
return {
kdata:[
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
],
}
},
computed:{
newdata(){
return this.kdata.map(v=>v[0])
}
},
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
xAxis: {
//配置x轴的参数
data: ["日化", "蔬菜", "电器", "美妆"],
},
yAxis: {
//配置y轴的参数
},
tooltip: {
trjgger: "axis",
axisPointer: {
type: "cross",
},
},
series: [
//系列 配置图标的类型
{
type: "candlestick", //设置k线图的类别
data: this.kdata,
itemStyle: {
color: "#ec5566", //设置上涨的颜色
color0: "blue", //下跌的颜色
borderColor: "#8A0000",
borderColor0: "#008f28",
},
markPoint: {
data:[
{
name:"最大值",
type:"max",
valueDim:"highest"//在哪个维度上进行最大最小值的设置
},
{
name:"最小值",
type:"min",
valueDim:"lowest"
},
{
name:"平均值",
type:"average",
valueDim:"close"
}
]
},
},
{
type:"line",
smooth:true,
data:this.newdata
}
],
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
7.雷达图
7.1 雷达图基本设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
title:{
text:"雷达图"
},
radar:[//只适用于雷达图
{
shape:"circle",
indicator:[
//雷达图的指示器，用来指定雷达图中的多个变量（维度）
{name:"口红",max:"6500"},
{name:"黄瓜",max:"16000"},
{name:"苹果",max:"30000"},
{name:"电脑",max:"38000"},
{name:"电灯泡",max:"52000"},
{name:"汽车",max:"25000"},
]
}
],
series:[
{
type:"radar",
data:[{
value:[4200,5300,6666,22345,12340,14567]
}]
}
]
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
7.2雷达图效果提升
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
title: {
text: "雷达图",
},
radar: [
//只适用于雷达图
{
shape: "circle",
indicator: [
//雷达图的指示器，用来指定雷达图中的多个变量（维度）
{ name: "口红", max: "6500" },
{ name: "黄瓜", max: "16000" },
{ name: "苹果", max: "30000" },
{ name: "电脑", max: "38000" },
{ name: "电灯泡", max: "52000" },
{ name: "汽车", max: "25000" },
],
//半径
radius: 120,
//坐标系的起始角度
startAngle: 180,
splitNumber: 4, //设置分割数目
axisName: {
formatter: "{value}",
color: "#428bd4",
},
//设置分割区的样式
splitArea: {
areaStyle: {
//分割区域的样式
color: ["#77eade", "#26c3be", "#00afe9", "#99sdd7"],
shadowColor: "rgba(0,0,0,.2)",
shadowBlur: 10,
},
},
},
],
series: [
{
type: "radar",
data: [
{
value: [4200, 5300, 6666, 22345, 12340, 14567],
areaStyle:{
color:"gold"
}
},
],
lineStyle:{
type:"dashed"
}
},
],
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
8.漏斗图
8.1 漏斗图的基本设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
title:{
text:"漏斗图"
},
tooltip:{
trigger:"item",
formatter:"{a}<br/>{b}:{c}%"
},
series:[{
type:"funnel",
data:[
{
value:60,name:"美食"
},
{
value:40,name:"日化"
},
{
value:20,name:"数码"
},
{
value:80,name:"家电"
},
{
value:100,name:"蔬菜"
},
]
}]
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
8.2 漏斗图样式设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
title:{
text:"漏斗图"
},
tooltip:{
trigger:"item",
formatter:"{a}<br/>{b}:{c}%"
},
series:[{
type:"funnel",
data:[
{
value:60,name:"美食"
},
{
value:40,name:"日化"
},
{
value:20,name:"数码"
},
{
value:80,name:"家电"
},
{
value:100,name:"蔬菜"
},
],
sort:"ascending",//排序
// sort:"none",
itemStyle:{
borderColor:"blue",
borderWidth:3
},
label:{
show:true,
position:"inside"
},
emphasis:{
label:{
fontSize:30
}
}
}]
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
9.仪表盘
9.1仪表盘设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
series:[
{
type:"gauge",
data:[
{
value:45,
name:"提示信息"
}
],
detail:{
valueAnimation:true
},
progress:{
show:true
}
}
]
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
10.关系图
10.1关系图设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
export default {
data(){
return {
list:[
//创建关系图的节点数据
{
name:"千层面",
id:"1",
symbolSize:30
},
{
name:"意大利面",
id:"2",
symbolSize:30
},
{
name:"红烧牛肉面",
id:"3",
symbolSize:30
},
{
name:"炸酱面",
id:"4",
symbolSize:30
},
{
name:"鸡丝面",
id:"5",
symbolSize:30
},
],
//关系数据
num:[
{
source:"1",//边的节点名称
target:"2",//目标节点名称
relation:{
name:"竞争对手",
id:"1"
}
},
{
source:"1",//边的节点名称
target:"3",//目标节点名称
relation:{
name:"合作伙伴",
id:"1"
}
},
{
source:"3",//边的节点名称
target:"5",//目标节点名称
relation:{
name:"忽近忽远",
id:"1"
}
},
]
}
},
mounted() {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts);
//设置配置项
let option = {
series:[
{
type:"graph",//设置关系图
data:this.list,
layout:"force",//引导布局
itemStyle:{
color:"green"
},
label:{
//图形上的文字
show:true,
position:"bottom",
distance:6,//距离图形的位置
fontSize:16,
align:"center"
},
force:{
repulsion:100,
qravity:0.01,
edgeLength:200
},
links:this.num,
edgeLabel:{
show:true,
position:"middle",
formatter:(params)=>{
return params.data.relation.name
}
}
}
]
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
11.数据区域缩放
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let data=[150, 230, 224, 218, 135, 147, 260]
//设置配置项
let option={
xAxis:{
type: 'category',
data:xData
},
yAxis:{
type:"value"
},
series:[
{
type:'line',//设置为折线图
data,
smooth:true,
markPoint:{
data:[
{type:"max",name:"Max"},
{type:"min",name:"Min"}
]
},
markLine:{
data:[{
type:"average",name:"Avg"
}]
}
}
],
dataZoom:[
{
type:"slider",
xAxisIndex:0,
fliterMode:"none"
},
{
type:"slider",
yAxisIndex:0,
fliterMode:"none"
},
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
12.树图
12.1基本树形图
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
data(){
return {
list:{//最外层的数据就是数据的根节点
name:"根节点",//根节点的名字
children:[
{
name:"层级2",
children:[
{
name:"层级3-1",
children:[
{
name:"数据1",value:1314
},
{
name:"数据2",value:520
},
{
name:"数据3",value:88
},
{
name:"数据4",value:666
},
]
},
{
name:"层级3-2",
children:[
{
name:"数据1",value:1314
},
{
name:"数据2",value:520
},
{
name:"数据3",value:88
},
{
name:"数据4",value:666
},
]
}
]
}
]
}
}
},
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置配置项
let option={
tooltip:{
trigger:"item"
},
series:[
{
type:"tree",
data:[this.list],
symbolSize:15,
label:{
position:"left",
verticalAlign:"middle",
align:"center",
fontSize:10
},
leaves:{
label:{
position:"right",
verticalAlign:"middle",
align:"center",
}
},
emphasis:{
focus:"descendant"
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
12.2 方向切换树形图
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
data(){
return {
list:{//最外层的数据就是数据的根节点
name:"根节点",//根节点的名字
children:[
{
name:"层级2",
children:[
{
name:"层级3-1",
children:[
{
name:"数据1",value:1314
},
{
name:"数据2",value:520
},
{
name:"数据3",value:88
},
{
name:"数据4",value:666
},
]
},
{
name:"层级3-2",
children:[
{
name:"数据1",value:1314
},
{
name:"数据2",value:520
},
{
name:"数据3",value:88
},
{
name:"数据4",value:666
},
]
}
]
}
]
}
}
},
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置配置项
let option={
tooltip:{
trigger:"item"
},
series:[
{
type:"tree",
data:[this.list],
symbolSize:15,
left:"20%",
//设置布局方向
//orient:"RL",//从右向左
orient:"TB",
label:{
rotate:90,
position:"left",
verticalAlign:"middle",
align:"center",
fontSize:10
},
leaves:{
label:{
position:"right",
verticalAlign:"middle",
align:"center",
}
},
emphasis:{
focus:"descendant"
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
13.数据排序
网址：Documentation - Apache ECharts
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置配置项
let option={
dataset:[
{
//数据的分类
dimensions:["类别","数量"],
//分类数据
source:[
["美食",123],
["日化",98],
["汉堡包",134],
["老八密制小汉堡",33],
["酸粉糖",12],
["乳酪",78],
["地瓜干",34],
["土豆片",56],
["黄瓜丝",90],
]
},
{
transform:{
type:"sort",
config:{
dimension:"数量",
order:"desc"
}
}
},
],
xAxis:{
type:"category",
axisLabel:{
interval:0,
rotate:30
}
},
yAxis:{},
series:[
{
type:"bar",
encode:
{
x:"类别",
y:"数量"
},
datasetIndex:1
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
14.内置主题设置
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//echarts中内置主题
// light dark
//echarts.init(‘图表dom的设置’，主题设置)
//初始化
const myEcharts = echarts.init(this.$refs.mycharts,"dark")
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
yAxis:{
//配置y轴的参数
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
data:yData
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
15.自定义主题
步骤1：进入主题下载，选择定制主题 https://echarts.apache.org/zh/download-theme.html
步骤2：下载对应主题的json文件，复制 步骤3：将复制的文件放在项目js文件中
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
import {roma} from "../assets/index.js"
export default {
mounted () {
//自定义主题
//1.引用主题文件的内容
//初始化
const myEcharts = echarts.init(this.$refs.mycharts,roma)
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
yAxis:{
//配置y轴的参数
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
data:yData
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
16.中国地图展示
中国地图数据下载网址：DataV.GeoAtlas地理小工具系列
将下载的数据放到js文件然后导入
获取福州市坐标
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
import {roma} from "../assets/index.js"
import {mapData} from "../assets/mapData.js"
export default {
mounted () {
//自定义主题
//1.引用主题文件的内容
//初始化
const myEcharts = echarts.init(this.$refs.mycharts,roma)
//注册当前使用的地图名
echarts.registerMap("ChinaMap",mapData)
let option={
geo:{
//地理坐标组件
type:"map",
map:"ChinaMap",
roam:true,//开启平移
zoom:5,
center:[119.306345,26.080429]//福州市
}
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
17.省份地图展示与效果优化
地图下载：https://geo.datav.aliyun.com/areas_v3/bound/350000_full.json
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
import {roma} from "../assets/index.js"
import {mapData} from "../assets/mapData.js"
export default {
mounted () {
//自定义主题
//1.引用主题文件的内容
//初始化
const myEcharts = echarts.init(this.$refs.mycharts,roma)
//注册当前使用的地图名
echarts.registerMap("ChinaMap",mapData)
let option={
geo:{
//地理坐标组件
type:"map",
map:"ChinaMap",
roam:true,//开启平移
// zoom:5,
// center:[119.306345,26.080429]//福州市
label:{
show:true,
color:"black",
fontSize:10,
},
itemStyle:{
areaColor:"green"
}
}
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
18.地图标记设置与效果
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
import { roma } from "../assets/index.js";
import { mapData } from "../assets/mapData.js";
export default {
mounted() {
//自定义主题
//1.引用主题文件的内容
//初始化
const myEcharts = echarts.init(this.$refs.mycharts, roma);
//注册当前使用的地图名
echarts.registerMap("ChinaMap", mapData);
let option = {
geo: {
//地理坐标组件
type: "map",
map: "ChinaMap",
roam: true, //开启平移
// zoom:5,
// center:[119.306345,26.080429]//福州市
},
series: [
//散点图
{
type: "scatter",
data: [
{
name: "北京市", //数据项的名字
value: [116.46, 39.92, 4000],
},
],
coordinateSystem: "geo",
symbolSize: 30,
// label:{
// show:true
// }
},
{
type: "effectScatter", //涟漪效果散点图
coordinateSystem: "geo",
data: [
{
name: "福州市", //数据项的名字
value: [119.308069, 26.078352, 4000],
},
],
//设置涟漪效果的相关配置
rippleEffect:{
number:2,//波纹数量
scale:4
},
itemStyle:{
color:"gold"
}
},
],
};
//绘制统计图
myEcharts.setOption(option);
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
19.图表自适应大小
效果：让图表根据浏览器大小自适应
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let dataA=[50, 230, 24, 218, 135, 147, 260]
let dataB=[180, 20, 224, 118, 125, 125, 148]
let dataC=[135, 147, 260, 288, 136, 47, 160]
let dataD=[30, 280, 224, 48, 175, 247, 360]
//设置配置项
let option={
xAxis:{
type: 'category',
data:xData
},
yAxis:{
type:"value"
},
series:[
{
name:"美食",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataA,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
{
name:"日化",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataB,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
{
name:"摄影",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataC,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
{
name:"插花",
type:"line",
//数据的堆叠
stack:"num",//同类型的数据需要匹配相同的stack属性值
data:dataD,
//样式填充
areaStyle:{},
//选中高亮状态
emphasis:{
focus:"series"//聚焦当前的区域高亮
}
},
]
}
//绘制统计图
myEcharts.setOption(option)
//监听页面大小的改变
window.addEventListener("resize",()=>{
console.log("浏览器大小改变了")
myEcharts.resize()
})
}
}
</script>
<style>
#demoDiv{
width: 100%;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
20.加载动画效果
json-server使用 1)全局下载 npm install -g json-server 2）下载axios npm install --save axios 3）启动json-server json-server --watch data.json --port 9042
模拟时将网速变为3G
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv"></div>
</template>
<script>
// 1.引用echartss
import * as echarts from "echarts";
import axios from "axios";
export default {
data() {
return {
edata: [],
};
},
methods: {
async linkData() {
let echatrtsData = await axios({
url: "http://localhost:9042/one",
});
console.log(echatrtsData.data);
this.edata = echatrtsData.data;
},
},
//json-server
/**
* 1)全局下载 npm install -g json-server
* 2)新建文件夹与文件用来容纳模拟数据
* 3)启动json-server
*/
mounted() {
const myEcharts = echarts.init(this.$refs.mycharts);
//开始等待
myEcharts.showLoading();
this.linkData().then(() => {
myEcharts.hideLoading();
let option = {
//结束等待
title: {
text: "饼状图",
left: "center",
},
legend: {
left: "left",
//图例的布局朝向
orient: "verical",
},
series: [
{
name: "销量统计",
type: "pie", //设置为饼状图
data: this.edata,
radius: ["40%", "70%"], //设置饼图的半径 第一项内半径 第二项外半径 设置环形图
//设置环形图的文本标签
label: {
show: true,
position: "inside", //outside 外侧展示 inside 内展示 center 中心展示
},
roseType: "area", //是否设置为南丁格尔图
itemStyle: {
color: "#c23531",
shadowBlur: 200,
shadowColor: "reba(0,0,0,.5)",
},
},
],
};
//绘制统计图
myEcharts.setOption(option);
});
//初始化
},
};
</script>
<style>
#demoDiv {
width: 500px;
height: 500px;
border: 1px solid gold;
}
</style>
结果展示
21.图表动画配置
动画方面的配置项（animation）
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
animation:true,
animationThreshold:5,//是否开启动画的阈值，当单个系列显示的图形数量大于阈值时会关闭动画
animationDuration:5000,//设置动画持续的时间
animationDelay:2000,//设置动画延迟的时间
animationEasing:"linear",
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
type:"value"
},
yAxis:{
//配置y轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
barWidth:20,//设置宽度
// color:"green",//设置轴的颜色
itemStyle:{
normal:{
color:function(params){
let colorList=['pink','red',"green","blue","yellow"]
return colorList[params.dataIndex]
}
}
},
data:yData,
//最大值/最小值
markPoint:{
data:[
//标注的数据数组，每一个都是一个对象
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
//图标的标线
markLine:{
data:[
{
type:"average",//平均值
name:"平均值"
},
]
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
22.ECharts事件
例子1
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//事情
//on方法监听
myEcharts.on("click",(event)=>{
console.log("事件",event)
})
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
// animation:true,
// animationThreshold:5,//是否开启动画的阈值，当单个系列显示的图形数量大于阈值时会关闭动画
// animationDuration:5000,//设置动画持续的时间
// animationDelay:2000,//设置动画延迟的时间
// animationEasing:"linear",
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
type:"value"
},
yAxis:{
//配置y轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
barWidth:40,//设置宽度
// color:"green",//设置轴的颜色
itemStyle:{
normal:{
color:function(params){
let colorList=['pink','red',"green","blue","yellow"]
return colorList[params.dataIndex]
}
}
},
data:yData,
//最大值/最小值
markPoint:{
data:[
//标注的数据数组，每一个都是一个对象
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
//图标的标线
markLine:{
data:[
{
type:"average",//平均值
name:"平均值"
},
]
}
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
例子2
当有两个图时，规定只可以点击一个图
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//事情
//on方法监听
// myEcharts.on("click",(event)=>{
// console.log("事件",event)
// })
myEcharts.on("click","series.line",(event)=>{
console.log(event)
})
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
// animation:true,
// animationThreshold:5,//是否开启动画的阈值，当单个系列显示的图形数量大于阈值时会关闭动画
// animationDuration:5000,//设置动画持续的时间
// animationDelay:2000,//设置动画延迟的时间
// animationEasing:"linear",
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
type:"value"
},
yAxis:{
//配置y轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
barWidth:40,//设置宽度
// color:"green",//设置轴的颜色
itemStyle:{
normal:{
color:function(params){
let colorList=['pink','red',"green","blue","yellow"]
return colorList[params.dataIndex]
}
}
},
data:yData,
//最大值/最小值
markPoint:{
data:[
//标注的数据数组，每一个都是一个对象
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
//图标的标线
markLine:{
data:[
{
type:"average",//平均值
name:"平均值"
},
]
}
},
//折线图
{
type:'line',//设置为折线图
data:[20000, 30000, 19000, 35000, 25000],
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
规定只有点击福州时会显示
<!--About.vue代码-->
<template>
<!--echarts容器 默认宽高是0 如果 我们不进行设置的话 页面是不显示的-->
<div ref="mycharts" id="demoDiv">
</div>
</template>
<script>
// 1.引用echartss
import * as echarts from 'echarts'
export default {
mounted () {
//初始化
const myEcharts = echarts.init(this.$refs.mycharts)
//事情
//on方法监听
// myEcharts.on("click",(event)=>{
// console.log("事件",event)
// })
myEcharts.on("click",{name:"福州",seriesIndex:1},(event)=>{
console.log(event)
})
//设置echarts数据
//设置轴
let xData=["福州","厦门","临沂","杭州","苏州"]
let yData=["20000","40000","10000","30000","18000"]
//设置配置项
let option={
// animation:true,
// animationThreshold:5,//是否开启动画的阈值，当单个系列显示的图形数量大于阈值时会关闭动画
// animationDuration:5000,//设置动画持续的时间
// animationDelay:2000,//设置动画延迟的时间
// animationEasing:"linear",
title:{
text:"城市房价"
},
xAxis:{//配置x轴的参数
type:"value"
},
yAxis:{
//配置y轴的参数
data:xData,
type:"category"//坐标轴的类型。value 数据轴 category 类目轴
},
series:[//系列 配置图标的类型
{
name:"城市房价展示",
type:"bar",//系列类别
barWidth:40,//设置宽度
// color:"green",//设置轴的颜色
itemStyle:{
normal:{
color:function(params){
let colorList=['pink','red',"green","blue","yellow"]
return colorList[params.dataIndex]
}
}
},
data:yData,
//最大值/最小值
markPoint:{
data:[
//标注的数据数组，每一个都是一个对象
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
//图标的标线
markLine:{
data:[
{
type:"average",//平均值
name:"平均值"
},
]
}
},
//折线图
{
type:'line',//设置为折线图
data:[20000, 30000, 19000, 35000, 25000],
}
]
}
//绘制统计图
myEcharts.setOption(option)
}
}
</script>
<style>
#demoDiv{
width: 500px;
height: 500px;
border:1px solid gold;
}
</style>
结果展示
四.项目开发
1.vue3.0项目环境
node.js安装 vue脚手架安装 npm install -g @vue/cli 创建项目 vue create 项目名
2. 项目初始化
通过各种调试将页面变为空白原始状态
3.项目分辨率响应式分析与实施
4.项目分辨力响应式创建
下载 lib-flexble npm install --save lib-flexible
修改flexible.js文件 修改refreshRem函数
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) {
// width = 540 * dpr;
// }
// var rem = width / 10;
//修改 最小值400 最大值2560
if (width / dpr<400) {
width = 400 * dpr;
}
else if(width / dpr>2560){
width = 2560 * dpr;
}
//设置成24份 1920px设计稿 1rem 就是80px
var rem = width / 24;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
修改main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引用插件
import "lib-flexible/flexible.js"
createApp(App).use(store).use(router).mount('#app')
vscode安装该插件
将Root Font Size设置为80
5.项目头部信息条创建
<App.vue>
<template>
<router-view/>
</template>
<style lang="less">
body{
background:url("~@/assets/bg.jpg") top center no-repeat;
}
*{
margin: 0;
padding: 0;
box-sizing:border-box
}
</style>
<homePage.vue>
<template>
<div>
<header>
<h1>
大数据可视化
</h1>
</header>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
header{
height: 1rem;
width: 100%;
background-color:rgba(225, 219, 219, 0.1) ;
//标题的文字样式
h1{
font-size: .625rem;
color: rgb(28, 98, 158);
text-align: center;
line-height: 1rem;
}
}
</style>
结果展示
6.页面主体创建
<homePage.vue>
<template>
<div>
<header>
<h1>大数据可视化</h1>
</header>
<!--大容器--->
<section class="container">
<!--左容器-->
<section class="itemLeft">
<ItemPage>
<ItemOne/>
</ItemPage>
<ItemPage>
<ItemTwo/>
</ItemPage>
</section>
<!--中容器-->
<section class="itemCenter">
<h2>地图展示</h2>
</section>
<!--右容器-->
<section class="itemRight">
<ItemPage>
<ItemThree/>
</ItemPage>
<ItemPage>
<ItemFour/>
</ItemPage>
</section>
</section>
</div>
</template>
<script>
import ItemPage from "@/components/itemPage.vue";
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import ItemOne from "@/components/itemOne.vue";
import ItemTwo from "@/components/itemTwo.vue";
import ItemThree from "@/components/itemThree.vue";
import ItemFour from "@/components/itemFour.vue";
export default {
components: {
ItemPage,
itemOne,
itemTwo,
itemThree,
itemFour,
ItemOne,
ItemTwo,
ItemThree,
ItemFour
},
};
</script>
<style lang="less">
header {
height: 1rem;
width: 100%;
background-color: rgba(225, 219, 219, 0.1);
//标题的文字样式
h1 {
font-size: 0.625rem;
color: rgb(28, 98, 158);
text-align: center;
line-height: 1rem;
}
}
//大容器的样式
.container {
//最大最小的宽度
min-width: 1080px;
max-width: 1920px;
margin: 0 auto;
padding: 0.125rem 0.125rem 0;
// height: 500px;
// background-color: gray;
display: flex;
//设置左右页面的份数
.itemLeft,
.itemRight {
flex: 3;
}
.itemCenter {
flex: 5;
height: 10.5rem;
border: 1px solid blue;
padding: 0.125rem;
margin: .25rem;
}
}
</style>
<itemPage.vue>
<template>
<div class="item">
<!--设置插槽-->
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.item{
height: 5.125rem;
border:1px solid blue;
margin: .25rem;
background-color: rgba(12,130,255,.85);
}
</style>
<itemxxx.vue>
//四个组件
<template>
<div>
<h2>图表</h2>
<div class="echarts">
图表的容器
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
结果展示
7.vue3.0全局引用echarts与axios
1.安装echarts npm install --save echarts 2.安装axios npm install --save echarts
<App.vue>
<template>
<router-view/>
</template>
<script>
import {provide} from "vue"
import * as echarts from "echarts"
import axios from "axios"
export default{
setup(){
//provider("名字随便起","传递的内容")
provide("echarts",echarts)
provide("axios",axios)
}
}
</script>
<style lang="less">
body{
background:url("~@/assets/bg.jpg") top center no-repeat;
}
*{
margin: 0;
padding: 0;
box-sizing:border-box
}
</style>
<homePage.vue>
<!--script-->
<script>
import ItemPage from "@/components/itemPage.vue";
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import ItemOne from "@/components/itemOne.vue";
import ItemTwo from "@/components/itemTwo.vue";
import ItemThree from "@/components/itemThree.vue";
import ItemFour from "@/components/itemFour.vue";
import {inject} from "vue"
export default {
components: {
ItemPage,
itemOne,
itemTwo,
itemThree,
itemFour,
ItemOne,
ItemTwo,
ItemThree,
ItemFour
},
setup(){
let $echarts=inject("echarts")
let $axios=inject("axios")
console.log($echarts)
}
};
</script>
8.后台接口创建express介绍
9.后台express路由创建
1.安装express npm install --save express
1.创建Server文件夹，创建index.js
在index.js中设置代码
let express=require("express");
let app=express();
//引用路由文件
let chartOne=require("./router/one")
let chartTwo=require("./router/Two")
let chartThree=require("./router/Three")
let chartFour=require("./router/Four")
//使用中间件来配置路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
app.listen(8888)
创建四个文件
let express=require("express");
let router=express.Router()
router.get("/data",(req,res)=>{
res.send({
msg:"我是one的路由地址"
})
})
module.exports=router;
结果展示
10.api接口的创建
创建的json文件全部放在mock文件夹中
//one.json
{
"chartData":[
{"title":"冰箱","num":1827},
{"title":"洗衣机","num":342},
{"title":"电视机","num":541},
{"title":"微波炉","num":1347},
{"title":"烤箱","num":2431},
{"title":"空调","num":876},
{"title":"洗碗机","num":1578}
]
}
//two.json
{
"chartData":{
"day":["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
"num":{
"Clothes":[140,232,101,264,90,340,250],
"digit":[120,282,111,66,340,22,100],
"Electrical":[99,88,440,80,230,221,120],
"gear":[220,230,80,20,880,80],
"Chemicals":[220,302,80,150,22,90,22]
}
}
}
//three.json
{
"chartData":[
{"value":657,"name":"服饰"},
{"value":123,"name":"数码"},
{"value":90,"name":"家电"},
{"value":780,"name":"家居"},
{"value":1029,"name":"日化"},
{"value":671,"name":"熟食"}
]
}
//four.json
{
"chartData":{
"day":["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
"num":{
"Clothes":[14,232,101,264,190,340,250],
"digit":[10,282,111,166,340,212,100],
"Electrical":[199,88,440,80,230,221,120],
"gear":[220,230,180,201,880,180],
"Chemicals":[820,302,80,150,220,90,22]
}
}
}
//one.js 其他四个js也如此修改
let express=require("express");
let router=express.Router()
let oneData=require("../mock/one.json")
router.get("/data",(req,res)=>{
res.send({
msg:"我是one的路由地址",
chartData:oneData
})
})
module.exports=router;
node index.js //开启server服务
11.销量总量图表基本设置
//itemOne.vue
<template>
<div>
<h2>图表</h2>
<div class="echarts" id="oneChart">图表的容器</div>
</div>
</template>
<script>
import {inject,onMounted} from "vue"
export default {
setup(){
let $echarts=inject("echarts")
let $http=inject("axios")
async function getState(){
let oneData=await $http({
url:"/one/data"
})
console.log(oneData.data.chartData.chartData)
}
onMounted(()=>{
//调用请求
getState()
let myChart=$echarts.init(document.getElementById("oneChart"))
myChart.setOption({
xAixs:{
type:"value"
},
yAixs:{
type:"category"
},
series:[
{
type:"bar"
}
]
})
})
return {
getState
}
}
};
</script>
<style></style>
//app.vue
<template>
<router-view/>
</template>
<script>
import {provide} from "vue"
import * as echarts from "echarts"
import axios from "axios"
//设置基准路径
axios.defaults.baseURL="http://localhost:8888"
export default{
setup(){
//provider("名字随便起","传递的内容")
provide("echarts",echarts)
provide("axios",axios)
}
}
</script>
<style lang="less">
body{
background:url("~@/assets/bg.jpg") top center no-repeat;
}
*{
margin: 0;
padding: 0;
box-sizing:border-box
}
</style>
//解决跨域 后台Server 的index.js
let express=require("express");
let app=express();
//设置跨域
app.use(function(req,res,next){
res.header('Access-Control-Allow-Origin','*');
res.header('Access-Control-Allow-Headers','Content-Type,Content-Length,Authorization,Accept,X-Request-With,yourHeaderFeild');
res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
next();
})
//引用路由文件
let chartOne=require("./router/one")
let chartTwo=require("./router/Two")
let chartThree=require("./router/Three")
let chartFour=require("./router/Four")
//使用中间件来配置路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
app.listen(8888)
11.销售总量数据处理
<itemOne.vue>
<template>
<div>
<h2>图表1</h2>
<div class="echarts" id="oneChart">图表的容器</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup(){
let $echarts=inject("echarts")
let $http=inject("axios")
let data=reactive({})
let xdata=reactive([])
let ydata=reactive([])
function setData(){
xdata=data.data.chartData.chartData.map(v=>v.title)
ydata=data.data.chartData.chartData.map(v=>v.num)
console.log("xdata",xdata)
console.log("ydata",ydata)
}
async function getState(){
data=await $http({
url:"/one/data"
})
}
onMounted(()=>{
let myChart=$echarts.init(document.getElementById("oneChart"))
//调用请求
getState().then(()=>{
setData()
myChart.setOption({
xAxis:{
type:"value"
},
yAxis:{
type:"category",
data:xdata
},
series:[
{
type:"bar",
data:ydata
}
]
})
})
})
return {
getState,data,xdata,ydata,setData
}
}
};
</script>
<style scoped>
.echarts{
height: 4.5rem;
}
h2{
height: .6rem;
color:#fff;
line-height: 0.6rem;
font-size: .25rem;
text-align: center;
}
</style>
12.样式优化
<template>
<div>
<h2>图表1</h2>
<div class="echarts" id="oneChart">图表的容器</div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
let xdata = reactive([]);
let ydata = reactive([]);
function setData() {
xdata = data.data.chartData.chartData.map((v) => v.title);
ydata = data.data.chartData.chartData.map((v) => v.num);
console.log("xdata", xdata);
console.log("ydata", ydata);
}
async function getState() {
data = await $http({
url: "/one/data",
});
}
onMounted(() => {
let myChart = $echarts.init(document.getElementById("oneChart"));
//调用请求
getState().then(() => {
setData();
myChart.setOption({
grid:{
top:"3%",
left:"1%",
right:"6%",
bottom:"3%",
containLabel:true
},
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: xdata,
},
series: [
{
type: "bar",
data: ydata,
itemStyle: {//设置图形颜色
normal: {
barBorderRadius:[0,20,20,0],//设置圆角
color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#005eaa",
},
{
offset: 0.5,
color: "#339ca8",
},
{
offset: 1,
color: "#cda819",
},
]),
},
},
},
],
});
});
});
return {
getState,
data,
xdata,
ydata,
setData,
};
},
};
</script>
<style scoped>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
结果展示
13.地图展示
//mapPage.vue
<template>
<div class="map" id="map">
</div>
</template>
<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
setup(){
let $echarts = inject("echarts");
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
getState().then(()=>{
console.log("map",mapData)
$echarts.registerMap("China",mapData.data)
let mapchart=$echarts.init(document.getElementById("map"))
mapchart.setOption(
{
geo:{
map:"China"
}
}
)
})
})
return {
getState,mapData
}
}
}
</script>
<style>
.map{
width: 100%;
height: 100%;
}
</style>
结果展示
14.地图样式设置
//mapPage
<template>
<div class="map" id="map">
</div>
</template>
<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
setup(){
let $echarts = inject("echarts");
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
getState().then(()=>{
console.log("map",mapData)
$echarts.registerMap("China",mapData.data)
let mapchart=$echarts.init(document.getElementById("map"))
mapchart.setOption(
{
geo:{
map:"China",
itemStyle:{
areaColor:"#0099ff",
borderColor:"00ffff",
shadowColor:"rgba(230,130,70,0.5)",
shadowBlur:30,
emphasis:{
focus:"self"
}
}
}
}
)
})
})
return {
getState,mapData
}
}
}
</script>
<style>
.map{
width: 100%;
height: 100%;
}
</style>
15.地图上设置散点图标记点
//mapPage.vue
<template>
<div class="map" id="map">
</div>
</template>
<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
setup(){
let $echarts = inject("echarts");
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
getState().then(()=>{
console.log("map",mapData)
$echarts.registerMap("China",mapData.data)
let mapchart=$echarts.init(document.getElementById("map"))
mapchart.setOption(
{
geo:{
map:"China",
itemStyle:{
areaColor:"#0099ff",
borderColor:"00ffff",
shadowColor:"rgba(230,130,70,0.5)",
shadowBlur:30,
emphasis:{
focus:"self"
}
}
},
tooltip:{
trigger:"item"
},
series:[
{
type:"scatter",
itemStyle:{
color:"gold"
},
coordinateSystem:"geo",
data:[
{name:"北京市",value:[116.46,39.92,4367]},
{name:"福州市",value:[119.307494,26.082506,3456]},
{name:"临沂市",value:[118.364687,35.10642,1890]},
{name:"青岛市",value:[120.391758,36.074094,3456]},
{name:"厦门市",value:[118.130355,24.47541,8888]}
]
}
]
}
)
})
})
return {
getState,mapData
}
}
}
</script>
<style>
.map{
width: 100%;
height: 100%;
}
</style>
16.地图视觉映射效果
//mapPage.vue
<template>
<div class="map" id="map"></div>
</template>
<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue";
export default {
setup(){
let $echarts = inject("echarts");
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
getState().then(()=>{
console.log("map",mapData)
$echarts.registerMap("China",mapData.data)
let mapchart=$echarts.init(document.getElementById("map"))
mapchart.setOption(
{
geo:{
map:"China",
itemStyle:{
areaColor:"#0099ff",
borderColor:"00ffff",
shadowColor:"rgba(230,130,70,0.5)",
shadowBlur:30,
emphasis:{
focus:"self"
}
}
},
tooltip:{
trigger:"item"
},
title:{
text:"城市销量",
left:"45%",
textStyle:{
color:"#fff",
fontSize:20,
textShadowBlur:10,
textShadowColor:"#33ffff"
}
},
visualMap:{
type:"continuous",
min:100,
max:6000,
calculable:true,
inRange:{
color: ["#50a3ba","#eac736","#d94e5d"]
},
textStyle:{
color:"#fff"
}
},
series:[
{
type:"scatter",
itemStyle:{
color:"gold"
},
coordinateSystem:"geo",
symbolSize: 30,
data:[
{name:"北京市",value:[116.46,39.92,4367]},
{name:"福州市",value:[119.307494,26.082506,3456]},
{name:"临沂市",value:[118.364687,35.10642,1890]},
{name:"青岛市",value:[120.391758,36.074094,3456]},
{name:"厦门市",value:[118.130355,24.47541,8888]}
]
}
]
}
)
})
})
return {
getState,mapData
}
}
}
</script>
<style>
.map {
width: 100%;
height: 100%;
}
</style>
结果展示
17.产品库存统计图设置
//itemThree.vue
<template>
<div>
<h2>库存统计</h2>
<div class="echarts" id="ethree">图表的容器</div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/three/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("饼状图", data);
let mychart = $echarts.init(document.getElementById("ethree"));
mychart.setOption({
legend: {
top: "bottom",
},
tooltip: {
show: true,
},
series: [
{
type: "pie",
data: data.data.chartData.chartData,
radius: [10, 100],
center: ["50%", "45%"],
roseType: "area",
itemStyle: {
borderRadius: 10,
},
},
],
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
结果展示
18.产品月销量统计图基本设置
//itemTwo
<template>
<div>
<h2>库存统计</h2>
<div class="echarts" id="etwo">图表的容器</div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/two/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("aaa", data);
let mychart = $echarts.init(document.getElementById("etwo"));
mychart.setOption({
xAxis:{
type:"category",
boundaryGap:false,
data:data.data.chartData.chartData.day
},
yAxis:{
type:"value",
},
series:[
{
name:"服饰",
type:"line",
data:data.data.chartData.chartData.num.Clothes
},
{
name:"数码",
type:"line",
data:data.data.chartData.chartData.num.Chemicals
},
{
name:"家电",
type:"line",
data:data.data.chartData.chartData.num.Electrical
},
{
name:"家居",
type:"line",
data:data.data.chartData.chartData.num.digit
},
{
name:"日化",
type:"line",
data:data.data.chartData.chartData.num.gear
},
]
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
结果展示
19.月销量图样式设置
//itemtwo
<template>
<div>
<h2>周销图</h2>
<div class="echarts" id="etwo">图表的容器</div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/two/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("aaa", data);
let mychart = $echarts.init(document.getElementById("etwo"));
mychart.setOption({
xAxis:{
type:"category",
boundaryGap:false,
data:data.data.chartData.chartData.day
},
yAxis:{
type:"value",
},
series:[
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(128,255,265)",
},
{
offset:1,
color:"rgb(1,191,236)"
}])
},
smooth:true,
name:"服饰",
type:"line",
data:data.data.chartData.chartData.num.Clothes
},
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(0,221,255)",
},
{
offset:1,
color:"rgb(77,119,255)"
}])
},
smooth:true,
name:"数码",
type:"line",
data:data.data.chartData.chartData.num.Chemicals
},
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(55,162,255)",
},
{
offset:1,
color:"rgb(116,21,219)"
}])
},
smooth:true,
name:"家电",
type:"line",
data:data.data.chartData.chartData.num.Electrical
},
{
smooth:true,
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(255,0,135)",
},
{
offset:1,
color:"rgb(135,0,157)"
}])
},
name:"家居",
type:"line",
data:data.data.chartData.chartData.num.digit
},
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(255,191,0)",
},
{
offset:1,
color:"rgb(224,623,236)"
}])
},
smooth:true,
name:"日化",
type:"line",
data:data.data.chartData.chartData.num.gear
},
]
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
结果展示
20.月销图优化
//itemtwo.vue
<template>
<div>
<h2>周销图</h2>
<div class="echarts" id="etwo">图表的容器</div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/two/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("aaa", data);
let mychart = $echarts.init(document.getElementById("etwo"));
mychart.setOption({
tooltip:{
trigger:"axis",
axisPointer:{
type:"cross",
label:{
backgroundColor:"#e6b600"
}
}
},
legend:{
data:["服饰","数码","家电","家居","日化"]
},
grid:{
left:"1%",
right:"4%",
bottom:"3%",
containLabel:true
},
xAxis:{
type:"category",
boundaryGap:false,
data:data.data.chartData.chartData.day,
axisLine:{
lineStyle:{
color:"#fff"
}
}
},
yAxis:{
type:"value",
axisLine:{
lineStyle:{
color:"#fff"
}
}
},
series:[
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(128,255,265)",
},
{
offset:1,
color:"rgb(1,191,236)"
}])
},
smooth:true,
name:"服饰",
type:"line",
data:data.data.chartData.chartData.num.Clothes
},
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(0,221,255)",
},
{
offset:1,
color:"rgb(77,119,255)"
}])
},
smooth:true,
name:"数码",
type:"line",
data:data.data.chartData.chartData.num.Chemicals,
},
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(55,162,255)",
},
{
offset:1,
color:"rgb(116,21,219)"
}])
},
smooth:true,
name:"家电",
type:"line",
data:data.data.chartData.chartData.num.Electrical
},
{
smooth:true,
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(255,0,135)",
},
{
offset:1,
color:"rgb(135,0,157)"
}])
},
name:"家居",
type:"line",
data:data.data.chartData.chartData.num.digit
},
{
stack:"Total",
showSymbol:false,
lineStyle:{
width:0
},
emphasis:{
focus:"series"
},
areaStyle:{
opacity:0.8,
color:new $echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color:"rgb(255,191,0)",
},
{
offset:1,
color:"rgb(224,623,236)"
}])
},
smooth:true,
name:"日化",
type:"line",
data:data.data.chartData.chartData.num.gear
},
]
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
结果展示
21.产品库存统计图
//itemFour.vue
<template>
<div>
<h2>库存统计图</h2>
<div class="echarts" id="efour"></div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/four/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("bbb", data);
let mychart = $echarts.init(document.getElementById("efour"));
mychart.setOption({
xAxis:{
type:"category",
data:data.data.chartData.chartData.day
},
yAxis:{
type:"value"
},
series:[
{
name:"服饰",
type:"bar",
data:data.data.chartData.chartData.num.Chemicals
}
]
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
22.库存统计图堆叠效果
//itemfour.vue
<template>
<div>
<h2>库存统计图</h2>
<div class="echarts" id="efour"></div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/four/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("bbb", data);
let mychart = $echarts.init(document.getElementById("efour"));
mychart.setOption({
xAxis:{
type:"category",
data:data.data.chartData.chartData.day
},
yAxis:{
type:"value"
},
series:[
{
name:"服饰",
type:"bar",
data:data.data.chartData.chartData.num.Chemicals,
stack:"total"
},
{
name:"家电",
type:"bar",
data:data.data.chartData.chartData.num.Clothes,
stack:"total"
},
{
name:"家居",
type:"bar",
data:data.data.chartData.chartData.num.Electrical,
stack:"total"
},
{
name:"数码",
type:"bar",
data:data.data.chartData.chartData.num.digit,
stack:"total"
},
{
name:"日化",
type:"bar",
data:data.data.chartData.chartData.num.gear,
stack:"total"
},
]
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
23.样式优化
//itemfour.vue
<template>
<div>
<h2>库存统计图</h2>
<div class="echarts" id="efour"></div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({
url: "/four/data",
});
}
onMounted(() => {
getState().then(() => {
console.log("bbb", data);
let mychart = $echarts.init(document.getElementById("efour"));
mychart.setOption({
grid:{
left:"3%",
right:"4%",
bottom:"3%",
containLabel:true
},
xAxis:{
type:"category",
data:data.data.chartData.chartData.day,
axisLine:{
lineStyle:{
color:"#fff"
}
}
},
yAxis:{
type:"value",
axisLine:{
lineStyle:{
color:"#fff"
}
}
},
legend:{},
tooltip:{
trigger:"axis",
axisPointer:{
type:"shadow"
}
},
series:[
{
name:"服饰",
type:"bar",
data:data.data.chartData.chartData.num.Chemicals,
stack:"total",
label:{
show:true
},
emphasis:{
focus:"series"
}
},
{
name:"家电",
type:"bar",
data:data.data.chartData.chartData.num.Clothes,
stack:"total",
label:{
show:true
},
emphasis:{
focus:"series"
}
},
{
name:"家居",
type:"bar",
data:data.data.chartData.chartData.num.Electrical,
stack:"total",
label:{
show:true
},
emphasis:{
focus:"series"
}
},
{
name:"数码",
type:"bar",
data:data.data.chartData.chartData.num.digit,
stack:"total",
label:{
show:true
},
emphasis:{
focus:"series"
}
},
{
name:"日化",
type:"bar",
data:data.data.chartData.chartData.num.gear,
stack:"total",
label:{
show:true
},
emphasis:{
focus:"series"
}
},
]
});
});
});
return {
getState,
data,
};
},
};
</script>
<style>
.echarts {
height: 4.5rem;
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
font-size: 0.25rem;
text-align: center;
}
</style>
结果展示
24.项目打包
本人博客：解决vue打包之后空白问题和路由问题_浩淇害死猫的博客-CSDN博客_vue打包后页面空白
然后npm run build
25.地图设置与打包
结果展示
Vue社区为您提供最前沿的新闻资讯和知识内容
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)