一.介绍
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.地图设置与打包
结果展示
4955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
