数据可视化
数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。通过“可视化”的方式，我们看不懂的数据通过图形化的手段进行有效地表达，准确高效、简洁全面地传递某种信息，在数据可视化中 除了常用的的柱状图、线状图、条形图、面积图、饼图、点图、仪表盘、走势图外，还有和弦图、圈饼图、金字塔、漏斗图、K线图、关系图、网络图、玫瑰图、帕累托图、数学公式图、预测曲线图、正态分布图、迷你图、行政地图、GIS地图等各种展现形式。 echarts官网
什么是Echarts
Echarts--商业级数据图表，它是一个纯JavaScript的图标库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
Echarts的特点
- 丰富可视化类型
- 多数据格式 无需转换
- 千万级别数据展示
- 移动端数据优化
- 多渲染方式跨平台使用
- 深度交互使用
- 动态数据
- 多样绚丽的数据特效
常用的配置项
init():
在初始化图表的方法中只有这一个配置项，只有这一个方法，可以多次初始化init
setOption():
设置图表实例的配置项，以及数据和所有参考数据都可以修改，修改之后，自动合成新的数据，然后刷新图表
title:
标题组件，包含主标题和副标题。
title: {
show: true, //显示策略，默认值true,可选为：true（显示）|false（隐藏）
text: "1主标题", //主标题文本，'\n'指定换行
link:'http://www.baidu.com', //主标题文本超链接,默认值true
target: "self", //指定窗口打开主标题超链接，支持'self'|'blank'(默认)
subtext: '副标题', //副标题文本，'\n'指定换行
sublink: '', //副标题文本超链接
subtarget: null, //指定窗口打开副标题超链接，支持'self'|'blank'(默认)
x:'center', //水平安放位置，默认为'left'，可选为：'center'|'left'|'right'|{number}（x坐标，单位px）
y: 'bottom', //垂直安放位置，默认为top，可选为：'top'|'bottom'|'center'|{number}（y坐标，单位px）
backgroundColor: 'red', //标题背景颜色，默认'rgba(0,0,0,0)'透明
borderWidth: 5, //标题边框线宽，单位px，默认为0（无边框）
borderColor: '#ccffee', //标题边框颜色,默认'#ccc'
padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10, //主副标题纵向间隔，单位px，默认为10
textStyle: { //主标题文本样式
{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal', // },
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {
color: "#a1b2c3", // 副标题文字的颜色。
fontStyle: "normal", // 副标题文字字体的风格。 'normal' 'italic' 'oblique'
fontWeight: "bold", // 副标题文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 500|600。
fontSize: 18, // 字体大小
lineHeight: "130", // 行高
textBorderColor: "red", // 文字本身的描边颜色。
textBorderWidth: 5, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
},
},
tooltip:
提示框组件，用于配置鼠标滑过或点击图表时的显示框
tooltip: { //提示框组件，用于配置鼠标滑过或点击图表时的显示框。
show: true, // 是否显示
trigger: 'axis', // 触发类型 'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
axisPointer: { // 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
},
// showContent: true, //是否显示提示框浮层，默认显示。
// triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
borderColor: '#333', // 提示框浮层的边框颜色。
borderWidth: 0, // 提示框浮层的边框宽。
padding: 5, // 提示框浮层内边距，
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
// 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
// formatter: '{a}--{b} 的成绩是 {c}'
formatter: function(arg) {
return arg[0].name + '的分数是:' + arg[0].data
}
},
补充：formatter(params):自定义信息提示框，参数params 包含当前图形的所有内容
legend：
图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
show: true, //是否显示
icon: "circle",//图例样式
top: "55%", // 组件离容器的距离
bottom:"20%", // 组件离容器的距离 (所有的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right')
right: "5%",
left:"10%" // // 组件离容器的距离
padding: 5, // 图例内边距
itemWidth: 6, // 图例标记的图形宽度。
itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
selectedMode: false, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
inactiveColor: "#fffddd", // 图例关闭时的颜色。
textStyle: {//图例的公用文本样式。
color: "#aabbcc", // 文字的颜色。
fontStyle: "normal", // 文字字体的风格。'italic'
fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: 12, // 文字的字体大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字块背景色。
borderColor: "transparent", // 文字块边框颜色。
borderWidth: 0, // 文字块边框宽度。
borderRadius: 0, // 文字块的圆角。
padding: 0, // 文字块的内边距
shadowColor: "transparent", // 文字块的背景阴影颜色
shadowBlur: 0, // 文字块的背景阴影长度。
shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
width: 50, // 文字块的宽度。 默认
height: 40, // 文字块的高度 默认
textBorderColor: "transparent", // 文字本身的描边颜色。
textBorderWidth: 0, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
}
},
grid:
grid 为直角坐标系内绘图网格。可以在网格上绘制折线图，柱状图 散点图（气泡图）到容器的距离位置。
// grid配置项：图标离容器的距离
// show:是否显示直角坐标系网格-----------值:true?false
// left:图表离容器左侧的距离-----------------值:number?百分比
// top:图表离容器顶部的距离-----------------值:number?百分比
// right:图表离容器右侧的距离---------------值:number?百分比
// bottom:图表离容器底部的距离------------值:number?百分比
// backgroundColor:网格背景色-------------值:rgba或#000000
// borderColor:网格的边框颜色--------------值:rgba或#000000
// borderWidth:网格的边框线宽-------------值:number
grid: {
show: true,
left: "5%",
top: "5%",
right: "5%",
bottom: "5%",
backgroundColor: "rgba(224, 17, 17, 1)",
borderColor: "rgba(96, 67, 67, 1)",
},
1）柱状图：
构成是由一根一根类似柱子的数据条组合而成的坐标平面,所以命名为柱状图
- 类型：type:bar
在xAxis 和yAxis 中可以设置坐标中的类型，xAxis默认type:value垂直（纵向）柱状图，当type:category时，就为水平柱状图。
value数值轴，适用于连续数据。category类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。time时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。log对数轴。适用于对数数据。
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; //x轴数据
let yData = [88, 75, 20, 210, 35]; //y轴数据
let option = {
xAxis: {
//配置x轴坐标参数
data: xData,
type: "category", //坐标轴类型。
},
yAxis: {
//配置y轴坐标参数
type: "value", //同x轴的参数
},
series: [
//系列 配置图表的类型
{
type: "bar",
name: "销量", //系列名称，用于提示框组件的显示，
data: yData,
//最大值最小值
markPoint: {
//图表标注。
data: [
//标注的数据数组。每个数组项是一个对象
{
type: "max", //直接用 type 属性标注系列中的最大值，最小值。
name: "最大值",
},
{
type: "min",
name: "最小值",
},
],
},
// 设置平均值
markLine: {
//图表标线
data: [
//标线的数据数组。
{
type: "average",
name: "平均值",
},
],
},
},
],
};
// 绘制图表 setOption 配置图表的配置项
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>
2) 饼图
饼状图是用整个圆表示总体的数量或整体值1，用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比。一般由标题（包括单位）、图例和数据等组成。
- 主要运用在对数据进行比较分析的时候，既可以表示绝对量，又可以表示相对量。
- 比柱形图等好在：数据更为清晰，各部分占总体的比重大小更为直观，一目了然。
- 类型：type:pie
<template>
<!-- 必须设置宽高，不然不显示图形-->
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted(){
// 1.初始化
let myChart=echarts.init(this.$refs.myChart)
// 2.设置echarts数据
// let data=[
// { value: 67, name: '美食' },
// { value: 85, name: '日化' },
// { value: 45, name: '数码' },
// { value: 98, name: '家电' }
// ]
// 将每个圆圈展示的效果，单独设置每个颜色
let data=[
{
value: 67,
name: '美食',
itemStyle:{
normal:{
color:'rgb(1,175,80)'
}
}
},
{
value: 85,
name: '日化',
itemStyle:{
normal:{
color:'rgb(255,175,80)'
}
}
},
{
value: 45,
name: '数码',
itemStyle:{
normal:{
color:'rgb(1,0,80)'
}
}
},
{
value: 98,
name: '家电',
itemStyle:{
normal:{
color:'rgb(30,50,70)'
}
}
}
]
// 3.设置配置项
let option={
title: {
text: '饼状图',
subtext: '基本设置',
left: 'center'//设置位置居中
},
tooltip: {
trigger: 'item'//触发类型item数据项图形触发
},
legend: {
orient: 'vertical',//图例列表的布局朝向 vertical纵向 horizontal 横向
left: 'left'
},
series: [
{
name: '销售量',
type: 'pie',
// 设置环形图
radius: ['40%', '70%'],//饼图的半径。数组的第一项是内半径，第二项是外半径。
// 设置环形图
label: {
//饼图图形上的文本标签
show: true,
// outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置
position:"inside",
color:"yellow"
},
labelLine: { //标签的视觉引导线配置
show: false
},
roseType: 'area', //是否展示成南丁格尔图，通过半径区分数据大小
itemStyle: {//设置内容样式
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data
}
]
}
// 4.设置图表绘制图表
myChart.setOption(option)
}
}
</script>
<style>
#myChart{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
3）折线图
- 类型：type:line
- 折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。
- 基本折线图
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted(){
// 1.初始化
let myChart=echarts.init(this.$refs.myChart)
// 2.设置数据
let xData=['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let data=[150, 230, 224, 218, 135, 147, 260]
// 3.设置配置项
let option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line',//设置系列为折线图
smooth: true,//是否平滑曲线显示如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5
areaStyle: {},//区域填充样式。设置后显示成区域面积图。
markPoint: {//图表标注。
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {//图表标线。
data: [{ type: 'average', name: 'Avg' }]
}
}
]
};
// 4.设置图表绘制图表
myChart.setOption(option)
}
}
</script>
<style>
#myChart{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
- 堆叠折线图
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置数据
let xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
// 3.设置配置项
let option = {
xAxis: {
type: "category",
data: xData,
},
yAxis: {
type: "value",
},
series: [
{
name: "美食",
type: "line",
stack: "num", //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
data: [120, 132, 101, 134, 90, 230, 210],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。
emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "日化",
type: "line",
stack: "num",
data: [220, 182, 191, 234, 290, 330, 310],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。
emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "熟食",
type: "line",
stack: "num",
data: [150, 232, 201, 154, 190, 330, 410],
areaStyle: {}, //区域填充样式。设置后显示成区域面积图。
emphasis: {
//折线图的高亮状态。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
],
};
// 4.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
4）散点图
- 类型type: scatter
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {},
yAxis: {},
tooltip: {},//提示框组件
series: [
{
symbolSize: 20,
data: [
[9.0, 7.04],
[18.07, 4.33],
[3.0, 9.65],
[9.05, 8.23],
[18.0, 9.76],
[15.0, 7.56],
[23.4, 5.31],
[10.1, 7.47],
[16.0, 8.26],
[12.7, 3.53],
[9.35, 7.2],
[7.4, 8.2],
[3.07, 4.82],
[18.2, 6.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[17.0, 6.55],
[12.0, 8.84],
[8.18, 5.82],
[6.32, 5.68],
],
type: "scatter", //散点图
// 圆形样式
color: {//线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#00CCFF", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(255, 173, 119, 1)", // 100% 处的颜色
},
],
globalCoord: true, // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
},
emphasis: {//高亮的图形和标签样式
itemStyle: {
borderColor: "rgba(102,205,46,0.30)",
borderWidth: 30,
},
},
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
5) K线图
- 类型type:candlestick。K线图可以查看k线历史走势，近期趋势，是上涨还是下跌，是调整还是震荡。分析k线的高低点和相对高低点。方便对于数据的走势进行查看，常用于股票图
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data(){
return {
data:[
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
]
}
},
computed:{
newarr(){
let linstdata= this.data.map((v)=>{
return v[0]
})
return linstdata
}
},
mounted() {
// 1.初始化
let myChart = echarts.init(this.$refs.myChart);
// 2.设置配置项
let option = {
xAxis: {
data: ["蔬菜", "水果", "熟食", "便捷食品"],
},
yAxis: {},
tooltip: {
//设置提示框
trigger: "axis",
axisPointer: {
type: "cross",
},
},
series: [
{
type: "candlestick", //k线图
data: this.data,
itemStyle: {
color: "#ec0000", //上涨的颜色
color0: "#00da3c", //下跌的颜色
borderColor: "#8A0000", //上涨的边框色
borderColor0: "#008F28", //下跌的边框色
},
markPoint: {
data: [
{
name: "最大值",
type: "max",
valueDim: "highest", //valueDim 指定是在哪个维度上的最大值、最小值、平均值
},
{
name: "最小值",
type: "min",
valueDim: "lowest",
},
{
name: "平均值",
type: "average",
valueDim: "close",
},
],
},
},
{
name: "MA20",
type: "line",
data: this.newarr,
smooth: true,
lineStyle: {
opacity: 0.5,
},
},
],
};
// 3.设置图表绘制图表
myChart.setOption(option);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
6)仪表盘
- 类型type:gauge
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
mounted(){
let myEcharts=echarts.init(this.$refs.myChart)
let options={
series:[
{
type:"gauge",
data:[
{
value:45,
name:"提示信息"
}
],
detail:{
valueAnimation:true // 设置启动效果
},
progress:{
show:true // 展示外圈的展示效果
}
}
]
}
myEcharts.setOption(options)
}
}
</script>
<style>
#myChart{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
7)关系图
- 类型：type:graph
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
list: [
//创建节点数据
{
name: "韦小宝",
id: "1",
symbolSize: 30, //节点大小
symbol: "circle", //节点形状，
},
{
name: "方怡",
id: "2",
symbolSize: 30, //节点大小
symbol: "circle", //节点形状，
},
{
name: "双儿",
id: "3",
symbolSize: 30, //节点大小
symbol: "circle", //节点形状，
},
{
name: "茅十八",
id: "4",
symbolSize: 30, //节点大小
symbol: "circle", //节点形状，
},
{
name: "吴六奇",
id: "5",
symbolSize: 30, //节点大小
symbol: "circle", //节点形状，
},
],
num: [
//关系数据
{
source: "1", //边的源节点名称的字符串
target: "2", //边的目标节点名称的字符串
relation: {
name: "老婆",
id: "1",
},
},
{
source: "1",
target: "3",
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() {
let myEcharts = echarts.init(this.$refs.myChart);
let options = {
series: [
{
type: "graph", //图标类型为关系图用于展现节点以及节点之间的关系数据
layout: "force", //图的布局 引导布局
data: this.list,
itemStyle: {
//节点的样式
color: "#95dcb2",
},
label: {
//图形上的文本标签
show: true,
position: "bottom", //位置底部
distance: 5, //距离图形元素的距离
fontSize: 18,
align: "center", //文字水平对齐方式
},
force: {
//设置个图形之间的间距
repulsion: 100, //点之间的距离
gravity: 0.01, //设置距离中心点位置
edgeLength: 200, //边的两个节点之间的距离
},
links: this.num, //节点间的关系数据
edgeLabel: {
//标签
show: true,
position: "middle", //标签位置线的中点
fontSize: 12,
formatter: (params) => {
//标签内容格式设置内容
return params.data.relation.name;
},
},
edgeSymbol: ["circle", "arrow"], //边两边的类型
autoCurveness: 0.01, //针对节点之间存在多边的情况，自动计算各边曲率
},
],
};
myEcharts.setOption(options);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
8)树图
- 类型type:tree
- 默认：树图中
正交布局的方向;水平方向:从左到右LR，从右到左RL;垂直方向的 从上到下TB，从下到上BT
<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
let myEcharts = echarts.init(this.$refs.myChart);
let data = {// 注意，最外层是一个对象，代表树的根节点
name: "层级1",// 节点的名称，当前节点 label 对应的文本
children: [
{
name: "层级2",
children: [
{
name: "层级3-1",
children: [//子节点
{ name: "数据1", value: 3938 }, // value 值，只在 tooltip 中显示
{ name: "数据2", value: 3812 },
{ name: "数据3", value: 6714 },
{ name: "数据4", value: 743 },
],
},
{
name: "层级3-2",
children: [
{ name: "数据1", value: 3534 },
{ name: "数据2", value: 5731 },
{ name: "数据3", value: 7840 },
{ name: "数据4", value: 5914 },
{ name: "数据5", value: 3416 },
],
},
],
},
],
};
let options = {
tooltip: {//提示框
trigger: "item",//触发时机
},
series: [
{
type: "tree",//树图
data: [data],
top: "1%",//tree组件离容器顶部的距离
left: "7%",
bottom: "1%",
right: "20%",
symbolSize: 10,//标记的大小
orient: 'BT', // 正交布局 的方向;从下到上'BT'
label: {//描述了每个节点所对应的文本标签的样式。
position: "left",//标签的位置。
verticalAlign: "middle",//文字垂直对齐方式
align: "right",//文字水平对齐方式
fontSize: 9,
},
leaves: {//叶子节点的特殊配置
label: {//了叶子节点所对应的文本标签的样式
position: "right",
verticalAlign: "middle",
align: "left",
},
},
emphasis: {//树图中个图形和标签高亮的样式。
focus: "descendant",//聚焦所有子孙节点
},
expandAndCollapse: true,//子树折叠和展开的交互由于绘图区域是有限的，而通常一个树图的节点可能会比较多，
// 这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，
// 等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，
// 可以点击将其展开。
animationDuration: 550,
animationDurationUpdate: 750,
},
],
};
myEcharts.setOption(options);
},
};
</script>
<style>
#myChart {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
9) 地图
- 类型：type:map
<template>
<div class="about">
<h1>This is an about page</h1>
<div id="myecharts" ref="demoh"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
// 引用的就是中国各省份的矢量数据
import cmap from "../assets/roma"
export default {
mounted() {
let myChart = echarts.init(this.$refs.demoh);
echarts.registerMap("chinaMap",cmap)//使用 registerMap 注册的地图名称。
let option = {
geo:{//地理坐标系组件。地理坐标系组件用于地图的绘制
type:"map",
map:"chinaMap",//使用 registerMap 注册的地图名称
// 默认设置完地图是固定死的不能拖动
roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
zoom :10,//当前视角的缩放比例。越大比例越大
center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
label:{//地图上显示文字提示信息
show:true,
color:"#ff6600",
fontSize:10//字体大小
},
itemStyle:{//地图区域的多边形 图形样式。
areaColor:"#ff6600"//地图区域的颜色。
}
}
};
myChart.setOption(option);
},
};
</script>
<style scoped>
#myecharts {
width: 600px;
height: 600px;
border: 2px solid red;
}
</style>
