Vue集成Echarts
1、项目
1.1、创建项目
vue create vue-echarts
cd vue-echarts
npm run serve
1.2、安装echarts
npm install -D echarts --save
1.3、修改项目配置
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
About.vue
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题"
},
// 设置x轴相关参数
xAxis: {
data: ["EZ", "VN", "NOC", "MF"]
},
// 设置y轴相关参数
yAxis: {
},
// 设置系列相关参数
series: {
// 图形名称
name: "LOL英雄大全",
// 图形类型
type: "bar",
// 数据
data: [6300, 4800, 3200, 600]
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
App.vue
<template>
<div id="app">
<About />
</div>
</template>
<script>
import About from './views/About.vue'
export default {
name: 'App',
components: {
About,
}
}
</script>
<style>
</style>
2、echarts
https://echarts.apache.org/zh
2.1、配置项手册
https://echarts.apache.org/zh/option.html#title.link
2.1.1、title标题组件
About.vue
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题",
// 主标题文本超链接
link:"https://baidu.com",
// 副标题链接
sublink:"https://baidu.com",
// 指定窗口打开主标题超链接；self：当前窗口打开，blank：新窗口打开；
target:"self",
backgroundColor:"pink",
borderColor:"red",
borderWidth:5,
x:"center",
subtext:"副标题",
//主标题样式
textStyle:{
color:"yellow",
fontSize:30
},
//副标题样式
subtextStyle:{
color:"yellow",
fontSize:30
}
},
// 设置x轴相关参数
xAxis: {
data: ["EZ", "VN", "NOC", "MF"]
},
// 设置y轴相关参数
yAxis: {
},
// 设置系列相关参数
series: {
// 图形名称
name: "LOL英雄大全",
// 图形类型
type: "bar",
// 数据
data: [6300, 4800, 3200, 600]
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.1.2、tootip提示框组件
https://echarts.apache.org/zh/option.html#tooltip
About.vue
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题",
// 主标题文本超链接
link: "https://baidu.com",
// 副标题链接
sublink: "https://baidu.com",
// 指定窗口打开主标题超链接；self：当前窗口打开，blank：新窗口打开；
target: "self",
backgroundColor: "pink",
borderColor: "red",
borderWidth: 5,
x: "center",
subtext: "副标题",
textStyle: {
color: "yellow",
fontSize: 30
},
subtextStyle: {
color: "yellow",
fontSize: 30
}
},
tooltip:{
trigger:"item",
axisPointer:{
type:"line"
},
// 是否显示提示框浮层，默认显示
// showContent:false,
// 提示框浮层的文本样式
textStyle: {
// 悬浮层样式
backgroundColor: "pink",
borderColor: "red",
borderWidth: 5,
color: "red"
},
// 自定义提示框内容
// formatter(params){
// console.log(params);
// }
},
// 设置x轴相关参数
xAxis: {
data: ["EZ", "VN", "NOC", "MF"]
},
// 设置y轴相关参数
yAxis: {
},
// 设置系列相关参数
series: {
// 图形名称
name: "LOL英雄大全",
// 图形类型
type: "bar",
// 数据
data: [6300, 4800, 3200, 600]
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.1.3、legend图例组件
About.vue
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题",
},
tooltip: {
},
// 图例组件
legend: {
// 设置图例的开启或关闭
show: true,
// 图例项的icon
// icon:"circle",
// 设置位置
top: "10%",
// 图例宽高
itemWidth: 10,
itemHeight: 20,
textStyle: {
color: "red",
fontSize: 30,
backgroundColor: "yellow"
}
},
// 设置x轴相关参数
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
// 设置y轴相关参数
yAxis: {
},
// 设置系列相关参数
series: {
// 图形名称
name: "销量",
// 图形类型
type: "bar",
// 数据
data: [5, 20, 35, 10, 10, 20]
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.1.4、series系列
About.vue
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题",
},
tooltip: {
},
// 图例组件
legend: {
// 设置图例的开启或关闭
show: true,
// 图例项的icon
// icon:"circle",
// 设置位置
top: "10%",
// 图例宽高
itemWidth: 10,
itemHeight: 20,
textStyle: {
color: "red",
fontSize: 30,
backgroundColor: "yellow"
}
},
// 设置x轴相关参数
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
// 设置y轴相关参数
yAxis: {
},
// 设置系列相关参数
series: {
// 图形名称
name: "销量",
// 图形类型
type: "bar",
// 数据
data: [5, 20, 35, 10, 10, 20],
// 最大最小值
markPoint: {
//标注的数据数组，每一项都是一个对象
data: [
{
type: "max",
name: "最大值"
},
{
type: "min",
name: "最小值"
}
]
},
// 图表的标线
markLine: {
data: [
{
type: "average",
name: "平均值"
}
]
}
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.1.5、grid
设置图标的容器与当前内容容器的位置或样式设置。
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
let yData = [88, 75, 20, 210, 35];
let option = {
xAxis: {
data: xData,
type: "category",
},
yAxis: {
type: "value",
},
// 直角坐标系内绘图网格
grid: {
show: true,
left: "20%",
top: "20%",
right: "20%",
bottom: "20%",
backgroundColor: "pink",
borderColor: "yellow"
},
// 提示框
tooltip: {},
series: [
{
type: "bar",
name: "销售",
data: yData,
}
]
};
vchart.setOption(option);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.1.6、dataset
数据排序
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 配置项
let options = {
dataset: [
{
// 数据分类
dimensions: ["类别", "数量"],
// 分类数据
source: [
["美食", 123],
["日化", 98],
["熟食", 342],
["数码", 267],
["蔬菜", 318],
["水果", 427]
]
},
{
transform: {
// 数据排序
type: "sort",
config: {
// 排序字段及规则
dimension: "数量", order: "desc"
}
}
}
],
xAxis: {
type: "category",
axisLabel: {
// 间隔
interval: 0,
// 倾斜
rotate: 30,
}
},
yAxis: {},
series: [
{
type: "bar",
encode: {
x: "类别",
y: "数量"
},
datasetIndex: 1,
},
]
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.2、柱状图
About.vue
X轴为类目轴
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题",
},
tooltip: {
},
// 图例组件
legend: {
// 设置图例的开启或关闭
show: true,
// 图例项的icon
// icon:"circle",
// 设置位置
top: "10%",
// 图例宽高
itemWidth: 10,
itemHeight: 20,
textStyle: {
color: "red",
fontSize: 30,
backgroundColor: "yellow"
}
},
// 设置x轴相关参数
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
//坐标轴的类型，value数据轴，category 类目轴
type:"category"
},
// 设置y轴相关参数
yAxis: {
},
// 设置系列相关参数
series: {
// 图形名称
name: "销量",
// 图形类型
type: "bar",
// 数据
data: [5, 20, 35, 10, 10, 20],
// 最大最小值
markPoint: {
//标注的数据数组，每一项都是一个对象
data: [
{
type: "max",
name: "最大值"
},
{
type: "min",
name: "最小值"
}
]
},
// 图表的标线
markLine: {
data: [
{
type: "average",
name: "平均值"
}
]
}
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
Y轴为类目轴
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 3、设置echarts参数
vchart.setOption({
// 设置echarts标题
title: {
text: "主标题",
},
tooltip: {
},
// 图例组件
legend: {
// 设置图例的开启或关闭
show: true,
// 图例项的icon
// icon:"circle",
// 设置位置
top: "10%",
// 图例宽高
itemWidth: 10,
itemHeight: 20,
textStyle: {
color: "red",
fontSize: 30,
backgroundColor: "yellow"
}
},
// 设置x轴相关参数
xAxis: {
type: "value"
},
// 设置y轴相关参数
yAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
//坐标轴的类型，value数据轴，category 类目轴
type: "category"
},
// 设置系列相关参数
series: {
// 图形名称
name: "销量",
// 图形类型
type: "bar",
// 数据
data: [5, 20, 35, 10, 10, 20],
// 设置轴的宽度
barWidth: 20,
// 设置轴的统一颜色
// color:"pink",
// 单独设置每个轴的颜色
itemStyle: {
normal: {
color: function (params) {
let colorList = ["#c23531", "#2f4554", "#61a0a8", "#91c7ae"]
return colorList[params.dataIndex]
}
}
},
// 最大最小值
markPoint: {
//标注的数据数组，每一项都是一个对象
data: [
{
type: "max",
name: "最大值"
},
{
type: "min",
name: "最小值"
}
]
},
// 图表的标线
markLine: {
data: [
{
type: "average",
name: "平均值"
}
]
}
}
})
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.3、饼图
饼状图
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 设置数据
let data = [
{ value: 67, name: "美食" },
{ value: 175, name: "日化" },
{ value: 27, name: "数码" },
{ value: 89, name: "家电" }
];
let option = {
title: {
text: "饼状图",
left: "center"
},
//图例
legend: {
left: "left",
// 图例的布局朝向
orient: "verical",
},
series: [
{
name: "销量统计",
type: "pie",
data: data,
},
],
};
vchart.setOption(option);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
环形图
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 设置数据
// let data = [
// { value: 67, name: "美食" },
// { value: 175, name: "日化" },
// { value: 40, name: "数码" },
// { value: 89, name: "家电" }
// ];
let data = [
{ value: 67, name: "美食", itemStyle: { normal: { color: 'rgb(1,175,80)' } } },
{ value: 175, name: "日化", itemStyle: { normal: { color: 'rgb(255,175,80)' } } },
{ value: 40, name: "数码", itemStyle: { normal: { color: 'rgb(1,0,80)' } } },
{ value: 89, name: "家电", itemStyle: { normal: { color: 'rgb(30,50,70)' } } }
];
let option = {
title: {
text: "饼状图",
left: "center"
},
//图例
legend: {
left: "left",
// 图例的布局朝向
orient: "verical",
},
series: [
{
name: "销量统计",
type: "pie",
data: data,
// 设置饼图的半径，第一项内半径，第二项外半径
radius: ["40%", "70%"],
// 设置环形图的文本标签
label: {
show: true,
// outside外侧展示，inside内存展示，center中心展示
position: "inside",
},
// 是否设置成南丁格尔图
roseType: "area",
itemStyle: {
color: '#c29375',
shadowBlur: 200,
shadowColor: "reba(0,0,0,.5)"
}
},
],
};
vchart.setOption(option);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.4、折线图
折线图效果
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 设置数据
let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let data = [130, 25, 234, 164, 89, 188, 79];
// 配置项
let option = {
xAxis: {
type: "category",
data: xData
},
yAxis: {
type: "value"
},
series: [
{
data: data,
// 折线图
type: "line",
// 开启平滑的过渡
smooth: true,
// 折线图样式
areaStyle: {},
// 图表的标注标线
markPoint: {
data: [
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" }
]
},
markLine: {
data: [
{ type: "average", name: "平均值" }
]
}
}
]
};
// 设置配置项
vchart.setOption(option);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
折线图堆叠
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 设置数据
let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let dataA = [130, 25, 234, 164, 89, 188, 79];
let dataB = [60, 215, 124, 164, 111, 288, 190];
let dataC = [90, 87, 77, 164, 299, 88, 179];
let dataD = [240, 85, 478, 527, 333, 142, 100];
// 配置项
let option = {
xAxis: {
type: "category",
data: xData
},
yAxis: {
type: "value"
},
series: [
{
name: "美食",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataA,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "日化",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataB,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "数码",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataC,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "家电",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataD,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
]
};
// 设置配置项
vchart.setOption(option);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.5、散点图
散点图基本效果
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let options = {
xAxis: {},
yAxis: {},
series: [
{
// 设置数据
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]
],
// 散点图
type: "scatter",
// 设置散点图大小
symbolSize: 20,
}
]
};
// 图标绘制
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
散点图效果实现
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let options = {
xAxis: {},
yAxis: {},
// 提示框
tooltip: {},
series: [
{
// 设置数据
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]
],
// 散点图
type: "scatter",
// 设置散点图大小
symbolSize: 20,
// 图形样式
// color:"red",
color: {
// 线性渐变
type: "linear",
// 四个属性相当于在图形包围盒中的百分比
x: 0,
y: 0,
x2: 1,
y2: 0,
// 线性渐变的颜色
colorStops: [
{
offset: 0,
color: "#00ccff"
},
{
offset: 1,
color: "rgba(255,173,2,.9)"
}
],
},
// 选中高亮效果
emphasis: {
itemStyle: {
borderColor: "rgba(100,200,50,.5)",
borderWidth: 30,
}
},
}
]
};
// 图标绘制
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.6、K线图
K线图基本效果
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let option = {
xAxis: {
data: ['日化', '蔬菜', '电器', '美妆'],
},
yAxis: {
},
series: [
{
// K线图
type: "candlestick",
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42]
]
},
],
};
vchart.setOption(option);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
K线图效果实现
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
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() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let option = {
xAxis: {
data: ['日化', '蔬菜', '电器', '美妆'],
},
yAxis: {
},
// 提示框
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
series: [
{
// K线图
type: "candlestick",
data: this.kdata,
itemStyle: {
// 上涨的颜色
color: "#ec5566",
// 下跌的颜色
color0: "green",
// 上涨的边框色
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,
}
],
};
vchart.setOption(option);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.7、雷达图
雷达图基本效果
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let option = {
title: {
text: "雷达图"
},
radar: [
{
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
indicator: [
{ name: "蔬菜", max: 6500 },
{ name: "水果", max: 16000 },
{ name: "熟食", max: 30000 },
{ name: "数码", max: 38000 },
{ name: "家电", max: 52000 },
{ name: "日化", max: 25000 }
],
// 设置雷达图效果图
shape: "circle",
}
],
series: [
{
type: "radar",
data: [
{
value: [4200, 5300, 6666, 2345, 15234, 14567]
}
]
}
]
};
vchart.setOption(option);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
雷达图效果实现
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let option = {
title: {
text: "雷达图"
},
radar: [
{
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
indicator: [
{ name: "蔬菜", max: 6500 },
{ name: "水果", max: 16000 },
{ name: "熟食", max: 30000 },
{ name: "数码", max: 38000 },
{ name: "家电", max: 52000 },
{ name: "日化", max: 25000 }
],
// 设置雷达图效果图
shape: "circle",
// 设置雷达图半径
radius: 200,
// 设置雷达图角度、内容进行旋转
// 坐标系的起始角度，进行旋转
startAngle: 180,
// 内部分割层级
splitNumber: 4,
// 设置内容及颜色
axisName: {
formatter: "{value}",
color: "#428BD4"
},
// 设置分割区域效果
splitArea: {
// 设置分割区的样式
areaStyle: {
color: ["#77EADE", "#26C3BE", "#64AFE9", "#428BD4"],
shadowColor: "0,0,0,.2",
shadowBlur: 10
}
}
}
],
series: [
{
type: "radar",
data: [
{
value: [4200, 5300, 6666, 2345, 15234, 14567],
// 内容填充样式
areaStyle: {
color: "rgba(255,255,0,.5)"
}
}
],
lineStyle: {
type: "dashed"
}
},
]
};
vchart.setOption(option);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.8、漏斗图
漏斗图基本效果
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let options = {
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: "蔬菜" },
],
left: "10%"
},
};
vchart.setOption(options);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
漏斗图效果实现
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let options = {
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: "蔬菜" },
],
left: "10%",
// 排序：ascending、none
sort: "ascending",
// 样式
itemStyle: {
borderColor: "red",
borderWidth: 3,
},
// 提示信息
label: {
show: true,
// 提示文本
position: "inside",
},
// 选中凸显
emphasis:{
label:{
fontSize:30,
}
}
},
};
vchart.setOption(options);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.9、仪表盘
仪表盘设置
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let options = {
series: {
type: "gauge",
data: [
{
value: 45,
name: "提示信息",
}
],
// 动画
detail: {
calueAnimation: true,
},
// 外圈
progress: {
show: true,
}
}
};
vchart.setOption(options);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.10、关系图
关系图设置
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
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: "4",
//
relation: {
name: "兄弟",
id: "1"
}
},
{
// 边的节点名称
source: "4",
// 目标节点名称
target: "1",
//
relation: {
name: "兄弟",
id: "1"
}
},
{
// 边的节点名称
source: "3",
// 目标节点名称
target: "5",
//
relation: {
name: "义妹",
id: "1"
}
},
]
}
},
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
let options = {
series: [
{
// 关系图
type: "graph",
data: this.list,
// 引导布局
layout: "force",
// 样式
itemStyle: {
color: "#95dcb2"
},
// 图形上的文字
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;
}
}
}
]
};
vchart.setOption(options);
},
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.11、数据区域缩放
数据区域缩放设置
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 设置数据
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: [
{
data: data,
// 折线图
type: "line",
// 开启平滑的过渡
smooth: true,
// 折线图样式
// areaStyle: {},
// 图表的标注标线
markPoint: {
data: [
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" }
]
},
markLine: {
data: [
{ type: "average", name: "平均值" }
]
}
}
],
// 数据区域缩放设置
dataZoom: [
{
type: "slider",
xAxisIndex: 0,
filterMode: "none",
},
{
type: "slider",
yAxisIndex: 0,
filterMode: "none",
},
]
};
// 设置配置项
vchart.setOption(option);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.12、树图
树图基本设置
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
data() {
return {
list: {
// 最外层的数据就是数据的根节点
name: "根节点", //名字
children: [
{
name: "层级2",
children: [
{
name: "层级3-1",
children: [
{ name: "数据1", vaule: 123 },
{ name: "数据2", vaule: 456 },
{ name: "数据3", vaule: 567 },
{ name: "数据4", vaule: 678 },
]
},
{
name: "层级3-2",
children: [
{ name: "数据1", vaule: 123 },
{ name: "数据2", vaule: 456 },
{ name: "数据3", vaule: 567 },
{ name: "数据4", vaule: 678 },
]
},
]
}
]
}
}
},
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 配置项
let options = {
tooltip: {
trigger: "item",
},
series: [
{
type: "tree",
data: [this.list],
// 标记大小
symbolSize: 15,
label: {
position: "left",
verticalAlign: "middle",
align: "conter",
fontSize: 10,
},
// 子节点
leaves: {
label: {
position: "right",
verticalAlign: "middle",
align: "conter",
}
},
emphasis: {
// 高亮子孙节点
focus: "descendant"
}
}
]
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
树图方向切换
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 配置项
let options = {
dataset: [
{
// 数据分类
dimensions: ["类别", "数量"],
// 分类数据
source: [
["美食", 123],
["日化", 98],
["熟食", 342],
["数码", 267],
["蔬菜", 318],
["水果", 427]
]
},
{
transform: {
// 数据排序
type: "sort",
config: {
// 排序字段及规则
dimension: "数量", order: "desc"
}
}
}
],
xAxis: {
type: "category",
axisLabel: {
// 间隔
interval: 0,
// 倾斜
rotate: 30,
}
},
yAxis: {},
series: [
{
type: "bar",
encode: {
x: "类别",
y: "数量"
},
datasetIndex: 1,
},
]
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.13、主题设置
内置主题
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
// echarts中内置主题：light、dark
let vchart = echarts.init(this.$refs.vcharts,"dark");
// 配置项
let options = {
dataset: [
{
// 数据分类
dimensions: ["类别", "数量"],
// 分类数据
source: [
["美食", 123],
["日化", 98],
["熟食", 342],
["数码", 267],
["蔬菜", 318],
["水果", 427]
]
},
{
transform: {
// 数据排序
type: "sort",
config: {
// 排序字段及规则
dimension: "数量", order: "desc"
}
}
}
],
xAxis: {
type: "category",
axisLabel: {
// 间隔
interval: 0,
// 倾斜
rotate: 30,
}
},
yAxis: {},
series: [
{
type: "bar",
encode: {
x: "类别",
y: "数量"
},
datasetIndex: 1,
},
]
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style><template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
// echarts中内置主题：light、dark
let vchart = echarts.init(this.$refs.vcharts,"dark");
// 配置项
let options = {
dataset: [
{
// 数据分类
dimensions: ["类别", "数量"],
// 分类数据
source: [
["美食", 123],
["日化", 98],
["熟食", 342],
["数码", 267],
["蔬菜", 318],
["水果", 427]
]
},
{
transform: {
// 数据排序
type: "sort",
config: {
// 排序字段及规则
dimension: "数量", order: "desc"
}
}
}
],
xAxis: {
type: "category",
axisLabel: {
// 间隔
interval: 0,
// 倾斜
rotate: 30,
}
},
yAxis: {},
series: [
{
type: "bar",
encode: {
x: "类别",
y: "数量"
},
datasetIndex: 1,
},
]
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
自定义主题
1、在主题编辑器中编辑主题
主题编辑器地址：https://echarts.apache.org/zh/theme-builder.html
2、下载对应主题json格式
3、创建js文件把刚下载的文件写入并且暴露
let roma = 主题json
export default roma
4、引用主题文件
2.14、地图
中国地图展示
1、准备echarts基本结构
2、设置中国地图的矢量数据创建js文件
地图数据下载：https://datav.aliyun.com/portal/school/atlas/area_selector
3、在组件中获取地图矢量数据（引用数据json）
4、使用地图数据创建地图
5、百度地图开发平台：https://lbsyun.baidu.com/
chinamap.js
About.vue
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
import { mapdata } from "../assets/chinamap.js"
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 注册当前使用的地图名
echarts.registerMap("chinaMap", mapdata);
// 配置项
let options = {
// 地理坐标组件
geo: {
type: "map",
map: "chinaMap",
// 平移缩放
roam: true,
zoom: 10,
center: [116.402464, 39.915794]
}
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
地图标记设置与效果
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
import { mapdata } from "../assets/chinamap.js"
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 注册当前使用的地图名
echarts.registerMap("chinaMap", mapdata);
// 配置项
let options = {
// 地理坐标组件
geo: {
type: "map",
map: "chinaMap",
// 平移缩放
roam: true,
// zoom: 10,
// center: [116.402464, 39.915794]
label: {
show: true,
color: "#ff6600",
fontSize: 10,
},
itemStyle: {
areaColor: "green"
}
}
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
地图散点图
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
import { mapdata } from "../assets/chinamap.js"
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 注册当前使用的地图名
echarts.registerMap("chinaMap", mapdata);
// 配置项
let options = {
// 地理坐标组件
geo: {
type: "map",
map: "chinaMap",
// 平移缩放
roam: true,
},
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: [
108.95,
34.26
]
}
],
// 设置涟漪效果的相关配置
rippleEffect: {
// 波纹数量
number: 2,
scale: 4,
},
itemStyle: {
color: "red"
}
}
]
};
// 设置配置项
vchart.setOption(options);
}
}
</script>
<style>
#about {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
2.15、图标自适应大小
<template>
<!-- echarts的容器，默认宽高是0，如果不进行设置，页面是不显示的 -->
<div id="about" ref="vcharts"></div>
</template>
<script>
// 1、引入echarts
import * as echarts from "echarts";
export default {
mounted() {
// 2、初始化echarts
let vchart = echarts.init(this.$refs.vcharts);
// 设置数据
let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let dataA = [130, 25, 234, 164, 89, 188, 79];
let dataB = [60, 215, 124, 164, 111, 288, 190];
let dataC = [90, 87, 77, 164, 299, 88, 179];
let dataD = [240, 85, 478, 527, 333, 142, 100];
// 配置项
let option = {
xAxis: {
type: "category",
data: xData
},
yAxis: {
type: "value"
},
series: [
{
name: "美食",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataA,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "日化",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataB,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "数码",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataC,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "家电",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataD,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
]
};
// 设置配置项
vchart.setOption(option);
// 监听页面大小的改变
window.addEventListener("resize", () => {
vchart.resize();
});
}
}
</script>
<style>
#about {
width: 100%;
height: 500px;
border: 1px solid red;
}
</style>
2.16、加载动画效果
安装json-server
npm install -g json-server
模拟数据
新建src/mock/data.json
{
"one": [
{ "value": 67, "name": "美食", "itemStyle": { "normal": { "color": "rgb(1,175,80)" } } },
{ "value": 175,"name": "日化", "itemStyle": { "normal": { "color": "rgb(255,175,80)" } } },
{ "value": 40, "name": "数码", "itemStyle": { "normal": { "color": "rgb(1,0,80)" } } },
{ "value": 89, "name": "家电", "itemStyle": { "normal": { "color": "rgb(30,50,70)" } } }
]
}
启动json-server
在src/mock/执行
json-server --watch data.json --port 8090
访问
http://localhost:8090/one
安装axios
npm install --save axios
使用axios
data: dataA,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "日化",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataB,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "数码",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataC,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
{
name: "家电",
type: "line",
// 数据堆叠：同类型的数据需要匹配相同的stack属性值
stack: "num",
data: dataD,
// 样式填充
areaStyle: {},
// 选中高亮状态
emphasis: {
// 聚焦当前的区域高亮
focus: "series"
},
},
]
};
// 设置配置项
vchart.setOption(option);
// 监听页面大小的改变
window.addEventListener("resize", () => {
vchart.resize();
});
}
}
### 2.16、加载动画效果
#### 安装json-server
npm install -g json-server
#### 模拟数据
新建src/mock/data.json
{
“one”: [
{ “value”: 67, “name”: “美食”, “itemStyle”: { “normal”: { “color”: “rgb(1,175,80)” } } },
{ “value”: 175,“name”: “日化”, “itemStyle”: { “normal”: { “color”: “rgb(255,175,80)” } } },
{ “value”: 40, “name”: “数码”, “itemStyle”: { “normal”: { “color”: “rgb(1,0,80)” } } },
{ “value”: 89, “name”: “家电”, “itemStyle”: { “normal”: { “color”: “rgb(30,50,70)” } } }
]
}
#### 启动json-server
在src/mock/执行
json-server --watch data.json --port 8090
#### 访问
http://localhost:8090/one
#### 安装axios
npm install --save axios
#### 使用axios