九大系列图解
Vue引入Echars
vue2
全局引入
- 首先进行
Echars
安装
npm install echarts --save
- 然后在需要的文件中引入 / 或者直接
main.js
中挂载到Vue原型链上
// 1. 使用的文件中引入
import * as echarts from 'echarts'
// 2. mian.js 直接把echarts挂载到vue实例上
import * as echarts from 'echarts'
// 把echarts挂载到全局(使用:this.$echarts 即可)
Vue.prototype.$echarts = echarts
- 设置一个容器(容器至少要有高!)
<div
ref="box"
style="width: 600px; height: 300px; border: 1px solid red"
></div>
- 初始化echarts实例
// 1. 使用的文件中引入
var myChart = echarts.init(this.$refs.box)
// 2. mian.js 直接把echarts挂载到vue实例上
var myChart = this.$echarts.init(this.$refs.box)
- 进行配置并使用
myChart.setOption({
// 标题
title: {
text: 'ECharts 入门示例',
},
// 提示框
tooltip: {
},
// x轴
xAxis: {
// x轴数据源
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
// y轴
yAxis: {
},
// 系列 设置当前数据映射的图形
series: [
{
name: '销量',
// 指定图形类型
type: 'bar',
// 图形数据源
data: [5, 20, 36, 10, 10, 20],
},
],
})
vue3
后期补充上
title属性
- 标题组件,包含主标题和副标题
text:‘’
- 主标题文本,支持使用
\n
换行,取值string
title: {
text: '主标题文本',
},
link:‘’
- 主标题文本超链接,指定跳转的
url
,默认新窗口打开
title: {
text: '主标题文本', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
},
targer: ‘’
- 链接打开方式,默认新窗口打开
blank
textStyle:{}
- 设置主标题文字的样式
title: {
text: 'ECharts 入门示例', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
// 设置主标题文字的样式
textStyle: {
color: 'skyblue', // 颜色
fontStyle: 'italic', // 文字风格(正常/倾斜)
fontWeight: '300', // 文字粗细
fontSize: '20', // 字号
// ...
},
},
backgroundColor:‘’
- 标题背景色,默认透明
title: {
text: 'ECharts 入门示例', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
// 设置主标题文字的样式
textStyle: {
color: 'skyblue', // 颜色
fontStyle: 'italic', // 文字风格(正常/倾斜)
fontWeight: '300', // 文字粗细
fontSize: '20', // 字号
},
backgroundColor: 'pink', // 标题背景颜色
},
borderColor:‘’
- 标题的边框颜色
title: {
text: 'ECharts 入门示例', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
// 设置主标题文字的样式
textStyle: {
color: 'skyblue', // 颜色
fontStyle: 'italic', // 文字风格(正常/倾斜)
fontWeight: '300', // 文字粗细
fontSize: '20', // 字号
},
backgroundColor: 'pink', // 标题背景颜色
borderColor: '#ccc', // 标题边框颜色
},
borderWidth:0
- 标题的边框线宽
title: {
text: 'ECharts 入门示例', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
// 设置主标题文字的样式
textStyle: {
color: 'skyblue', // 颜色
fontStyle: 'italic', // 文字风格(正常/倾斜)
fontWeight: '300', // 文字粗细
fontSize: '20', // 字号
},
backgroundColor: 'pink', // 标题背景颜色
borderColor: '#ccc', // 标题边框颜色
borderWidth: 10, // 标题边框宽度
},
x:‘’
- 主文本和副文本在盒子中的对齐方式
title: {
text: 'ECharts 入门示例', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
// 设置主标题文字的样式
textStyle: {
color: 'skyblue', // 颜色
fontStyle: 'italic', // 文字风格(正常/倾斜)
fontWeight: '300', // 文字粗细
fontSize: '20', // 字号
},
backgroundColor: 'pink', // 标题背景颜色
borderColor: '#ccc', // 标题边框颜色
borderWidth: 10, // 标题边框宽度
x: 'center', // 主文本和副文本在盒子中的对齐方式
},
subtext:‘’
- 副标题文本,支持使用 \n 换行
- 副文本样式设置同主标题
title: {
text: 'ECharts 入门示例', // 主文本标题
link: 'http://www.baidu.com', // 主标题文本超链接
// 设置主标题文字的样式
textStyle: {
color: 'skyblue', // 颜色
fontStyle: 'italic', // 文字风格(正常/倾斜)
fontWeight: '300', // 文字粗细
fontSize: '20', // 字号
},
backgroundColor: 'pink', // 标题背景颜色
borderColor: '#ccc', // 标题边框颜色
borderWidth: 10, // 标题边框宽度
x: 'center', // 主文本和副文本在盒子中的对齐方式
subtext: '副标题文本', // 副标题文本,支持使用 \n 换行
},
tooltip
- 提示框组件,鼠标经过时候的提示
trigger:‘’
- 触发类型,取值有
'item'
(默认),'axis'
,'none'
'item'
,数据项图形触发,主要在散点图,饼图等无类目轴(x轴y轴)的图表中使用'axis'
,坐标轴触发,主要在柱状图,折线图等会使用类目轴(x轴y轴)的图表中使用'none'
,什么都不触发
// 提示框(鼠标经过时候的提示)
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
},
axisPointer:{} 指示器
- 坐标轴指示器配置项,坐标轴指示器是指示坐标轴当前刻度的工具
type
- 指示器类型,
'line'
直线指示器(默认),'shadow'
阴影指示器,'none'
无指示器,'cross'
十字准星指示器
直线指示器(默认)
阴影指示器
其他同理
// 提示框(鼠标经过时候的提示)
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
}
},
showContent:boolean
- 是否显示提示框浮层,默认显示。只需
tooltip
触发事件或显示axisPointer
而不需要显示内容时可配置该项为false
。
// 提示框(鼠标经过时候的提示)
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
},
// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示
showContent: false,
},
backgroundColor:‘’
- 提示框浮层的背景颜色
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
},
// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示
// showContent: false,
backgroundColor: 'skyblue',
},
borderColor:‘’
- 提示框浮层的边框颜色
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
},
// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示
// showContent: false,
backgroundColor: 'skyblue', // 提示框浮层的背景颜色
borderColor: '#ccc', // 提示框浮层的边框颜色
},
borderWidth:‘’
- 提示框浮层的边框宽
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
},
// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示
// showContent: false,
backgroundColor: 'skyblue', // 提示框浮层的背景颜色
borderColor: 'red', // 提示框浮层的边框颜色
borderWidth: 10, // 提示框浮层的边框宽
},
textStyle:{}
- 提示框浮层的文本样式
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
},
// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示
// showContent: false,
backgroundColor: 'skyblue', // 提示框浮层的背景颜色
borderColor: 'red', // 提示框浮层的边框颜色
borderWidth: 10, // 提示框浮层的边框宽
// 提示框浮层的文本样式
textStyle: {
color: 'white', // 提示框浮层文字颜色
fontStyle: 'italic', // 提示框浮层文字样式
fontWeight: 'bolder', // 提示框浮层文字字体的粗细
fontSize: 16, // 提示框浮层文字字体大小
},
},
自定义提示框浮层formatter:‘’ / fun
- 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
字符串形式
a
代表series
系列图标名称b
代表series
数据名称data
里面的name
c
代表series
数据值data
里面的value
d
代表 当前数据/总数 的比例
formatter: '{a} <br/>{b} : {c} ({d}%)'
函数形式
第一个参数就是数据源,里面的
data
是我们需要的数据(在series
的data
属性设置的)return 的东西就是提示框浮层的内容
// 提示框(鼠标经过时候的提示)
tooltip: {
trigger: 'axis', // 触发类型,坐标轴触发
// 坐标轴指示器配置项
axisPointer: {
// 指示器形式
type: 'shadow',
},
// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示
// showContent: false,
backgroundColor: 'skyblue', // 提示框浮层的背景颜色
borderColor: 'red', // 提示框浮层的边框颜色
borderWidth: 10, // 提示框浮层的边框宽
// 提示框浮层的文本样式
textStyle: {
color: 'white', // 提示框浮层文字颜色
fontStyle: 'italic', // 提示框浮层文字样式
fontWeight: 'bolder', // 提示框浮层文字字体的粗细
fontSize: 16, // 提示框浮层文字字体大小
},
// 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
formatter(params, ticket, callback) {
// console.log(params[0].data) // params是数据源
// console.log(ticket)
// console.log(callback)
// return 的东西就是提示框浮层的内容
return (
'数量:' + params[0].data.value + '-日期:' + params[0].data.data
)
},
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {
},
// 系列 设置当前数据映射的图形
series: [
{
name: '销量',
type: 'bar',
data: [
// 设置提示框的formatter之后,就可以自定义数据了,不设置当然也能定义数据
{
value: '5',
data: '2023-01-01',
},
{
value: '15',
data: '2023-01-02',
},
{
value: '25',
data: '2023-01-03',
},
{
value: '35',
data: '2023-01-04',
},
{
value: '45',
data: '2023-01-05',
},
{
value: '55',
data: '2023-01-10',
},
],
},
],
legend
- 图例组件
- 图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示
show:boolean
- 设置图例开启或者关闭
legend: {
show: true,
},
icon:‘’
- 图例项的 icon
legend: {
show: true,
icon: 'circle',
},
top:string / % / number
- 位置,
left
和right
和bottom
同理
legend: {
show: true, // 是否显示
icon: 'circle', // 图标,图形形状
top: 20, // 位置
},
itemWidth:number | itemHeight:number
- 图例标记的图形宽度高度
legend: {
show: true, // 是否显示
// icon: 'circle', // 图标,图形形状
top: 20, // 位置
// 图例宽高
itemWidth: 50,
itemHeight: 20,
},
textStyle:{}
- 图例的公用文本样式
legend: {
show: true, // 是否显示
// icon: 'circle', // 图标,图形形状
top: 20, // 位置
// 图例宽高
itemWidth: 50,
itemHeight: 20,
// 图例的公用文本样式
textStyle: {
color: 'pink', // 颜色
backgroundColor: 'skyblue', // 背景颜色
fontSize: 18,
},
},
xAxis
- 直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
data
- x轴数据源
xAxis: {
data: xData,
},
type
- 坐标轴类型(常用的就前两个)
'value'
数值轴,适用于连续数据,例如连续的纯数据(1,2,3,…)
'category'
类目轴,适用于离散的类目数据,例如分成一类的东西(春夏秋冬,星期,国家…),为该类型时必须通过data
设置类目数据'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度'log'
对数轴。适用于对数数据
xAxis: {
type: 'category',
data: xData,
},
boundaryGap
- 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样
- 类目轴中
boundaryGap
可以设置为true
和false
,默认为true
grid(网格)
- 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)
位置(grid组件离容器的距离)
- 类似于内边距吧
grid: {
show: true, // 是否显示网格,就是四条边组成的大框
borderColor: 'pink', // 网格边框颜色,网格四条边的颜色
left: '20%', // grid 组件离容器左侧的距离
top: '20%', // grid 组件离容器顶侧的距离
show: true, // 显示边框,是否显示直角坐标系网格
backgroundColor: 'pink', // 网格背景色,默认透明
containLabel: true, // grid 区域是否包含坐标轴的刻度标签。如果包含,就不会顶格,如果不包含,则会顶格,把网格覆盖
},
color(调色盘)
- 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。 默认为
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
- 我们可以自定义修改,有多少条数据,我们就在数组中指定多少个颜色
series(系列)
type(类型)
- 什么类型的图标,比如
line
是折线,bar
是柱形等
name(系列名称)
- 用于
tooltip
的显示,legend
的图例筛选变化(根据这里的name值)
stack(数据堆叠)
- 如果设置相同值,则会数据堆叠
- 数据堆叠:
- 第二个数据值 = 第一个数据值 + 第二个数据值
- 第三个数据值 = 第二个数据值 + 第三个数据值… 依次叠加
- 但是明显这种数据堆叠的效果不是我们想要的,如何解决呢?
- 如果给
stack
指定不同值或者去掉这个属性则不会发生数据堆叠
series: [
{
name: 'Email',
type: 'line',
// stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
// stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
// stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
// stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
// stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
柱状图bar
基本柱状图
<template>
<div
class="about"
ref="box"
style="width: 600px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'about',
mounted() {
// 初始化echarts
var myChart = this.$echarts.init(this.$refs.box)
// 设置x轴数据
const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// x轴上的值(也就是对应的y上的值)
const yData = [120, 200, 150, 80, 70, 110, 130]
// 配置项
const option = {
title: {
text: '主标题',
},
xAxis: {
type: 'category',
data: xData,
},
yAxis: {
// type: 'value',
},
series: [
{
data: yData,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
},
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
最大值、最小值markPoint:{} 图标标线markLine:{}
- 对图表进行标注,里面有个
data
数组,数组里面存放对象 - 对象中有一个
type
属性(特殊的标注类型,用于标注最大值最小值等) - 对象中还有一个
name
属性(标注名称)
series: [
{
data: yData,
type: 'bar',
// 显示柱状后面的背景颜色
showBackground: true,
// 设置柱状后面的背景颜色
backgroundStyle: {
color: 'skyblue',
},
// 图表标注
markPoint: {
data: [
// 标记的数据数组,每一项都是一个对象
// 最大值
{
type: 'max',
name: '最大值',
},
// 最小值
{
type: 'min',
name: '最小值',
},
// 平均值
// {
// type: 'average',
// name: '平均值',
// },
],
},
// 图表标线
markLine: {
data: [
// 平均线
{
type: 'average',
name: '平均线',
},
],
},
},
],
水平柱状图
- 只需要把y轴的坐标轴类型
type
设置为类目轴category
。把x轴的坐标轴类型type
设置为数值轴value
const option = {
title: {
text: '主标题',
},
xAxis: {
// type: 'category',
// data: xData,
type: 'value',
},
yAxis: {
// type: 'value',
type: 'category',
data: xData,
},
series: [
{
data: yData,
type: 'bar',
// 显示柱状后面的背景颜色
showBackground: true,
// 设置柱状后面的背景颜色
backgroundStyle: {
color: 'skyblue',
},
// 柱条的宽度,不设时自适应
barWidth: 10,
// 轴的颜色
// color: 'red',
// 单独设置每个轴的颜色
itemStyle: {
normal: {
color: function (params) {
let colorList = [
'pink',
'#ccc',
'#999',
'#666',
'#333',
'#777',
'#91cc75',
]
return colorList[params.dataIndex]
},
},
},
// 图表标注
markPoint: {
data: [
// 标记的数据数组,每一项都是一个对象
// 最大值
{
type: 'max',
name: '最大值',
},
// 最小值
{
type: 'min',
name: '最小值',
},
// 平均值
// {
// type: 'average',
// name: '平均值',
// },
],
},
// 图表标线
markLine: {
data: [
// 平均线
{
type: 'average',
name: '平均线',
},
],
},
},
],
柱子渐变色,需要通过color
- 通过
color
进行设置,一共有两种方式
// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0,
0,
0,
1,
[
{
offset: 0, color: '#00fffb' }, // 0 起始颜色
{
offset: 1, color: '#0061ce' }, // 1 结束颜色
]
),
// 修改线性渐变色方式 2
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'red', // 0% 处的颜色
},
{
offset: 1,
color: 'blue', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
设置grid,是否显示刻度文字containLabel
- 只需要把
containLabel
设置为true
即可
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '3%',
right: '4%',
bottom: '3%',
top: '3%',
// 是否包含文本
containLabel: true,
},
柱状图与刻度对齐方式axisTick >> alignWidthLabel
下面的y轴也是同理
如果为
true
,则刻度会与柱子对齐。如果为false
,则柱子会在刻度中间
xAxis: [
{
// 使用类目,必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 刻度设置
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: true,
// show是否显示刻度
show: false
},
},
],
修改x轴上的文字标签的相关样式axisLabel
xAxis: [
{
// 使用类目,必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 刻度设置
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
// 是否显示刻度
show: false,
},
// 修改刻度文字
axisLabel: {
color: 'red',
},
},
],
修改x轴颜色设置axisLine
// 修改y轴颜色
axisLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
// width: 8, // x轴线的粗细
// opcity: 0, // 如果不想显示x轴线,则设为0
},
},
修改y轴分割线颜色样式
// Y轴分割线颜色
splitLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
},
},
饼图pie
基本饼图
<template>
<div
class="demo01"
ref="box"
style="width: 600px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo01',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 饼图数据源
const data = [
{
value: 1048, name: '<1000' },
{
value: 735, name: '1000~3000' },
{
value: 580, name: '3000~5000' },
{
value: 484, name: '5000~10000' },
{
value: 300, name: '10000+' },
]
// 配置项
const option = {
title: {
text: '基本饼状图',
left: 'center', // 位置,标题居中
},
legend: {
// 图例的布局朝向
orient: 'vertical', // 垂直方式,默认水平
left: 'right', // 位置
},
series: [
{
name: '收入图',
type: 'pie',
// 饼图半径
radius: ['30%', '50%'],
data: data,
// 高亮状态的扇区和标签样式
emphasis: {
// 每一项的样式
itemStyle: {
shadowBlur: 10, // 图形阴影的模糊大小
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
},
},
// 饼图图形上的文本标签
label: {
// 是否显示文字,默认是true
show: true,
// 文本的位置 取值有inside(内部),outside(外部,默认),center(中心)
position: 'inside',
// 文本标签控制饼形图的相关样式
fontSize: 10,
},
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
圆环图radius:number/string/Array
series
的饼图中有radius
属性,也就是饼图的半径,值可以是number
,string
,Array
类型的取值可以是百分比,具体的px。如果是数组,则第一项是内半径,第二项是外半径
radius: ['30%', '50%'] // 就改了这一行,其他的都同上
饼图图形上的文本标签label:{}
- 可用于说明图形的一些数据信息,比如值,名称等
label: {
// 是否显示文字,默认是true
show: true,
// 文本的位置 取值有inside(内部),outside(外部,默认),center(中心)
// position: 'inside',
// 自定义饼图上显示的文本
formatter: (params) => {
// console.log(params.data) // 设置的饼图数据源
// console.log(params.percent) // 数据的百分比占多少
// 想要什么样的,就返回什么样的
return (
params.data.name +
'的有' +
params.data.value +
'占比%' +
params.percent
)
},
},
labelLine(线的样式)
- 标签的视觉引导线样式,再
label
位置设置为outside
的时候会显示视觉引导线
属性:
show
,是否显示length
,视觉引导项第一段的长度length
2,视觉引导项第二段的长度
// 控制引导线的样式
labelLine: {
show: true,
length: 6,
length2: 8,
},
设置为南丁格尔图roseType:boolean/string
- 是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
'radius'
扇区圆心角展现数据的百分比,半径展现数据的大小'area'
所有扇区圆心角相同,仅通过半径展现数据大小
// 设置是否展示成南丁格尔图
roseType: 'area',
图形样式,设置每一项的样式itemStyle:{}
- 设置每一项的设置基本都是
itemStyle: {}
color
取值有字符串和函数,如果想修改每一项,就用函数形式,dataIndex
是每一项的索引
itemStyle: {
// 全部一个颜色
// color: 'skyblue',
// 每一项都不同颜色
color: (params) => {
let colorList = [
'pink',
'#ccc',
'#999',
'#666',
'#333',
]
return colorList[params.dataIndex]
},
borderColor: '#ccc',
borderType: 'dashed',
},
改变每一项的颜色,还可以通过修改数据源实现
// 饼图数据源
const data = [
{
value: 1048,
name: '<1000',
itemStyle: {
normal: {
color: 'pink',
},
},
},
{
value: 735,
name: '1000~3000',
itemStyle: {
normal: {
color: 'skyblue',
},
},
},
{
value: 580,
name: '3000~5000',
itemStyle: {
normal: {
color: '#ccc',
},
},
},
{
value: 484,
name: '5000~10000',
itemStyle: {
normal: {
color: '#333',
},
},
},
{
value: 300,
name: '10000+',
itemStyle: {
normal: {
color: '#999',
},
},
},
]
折线图line
基本折线图
<template>
<div
class="demo02"
ref="box"
style="width: 660px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo02',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 线型图x轴数据源
const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// 线型图y轴数据源
const yData = [150, 230, 224, 218, 135, 147, 260]
// 配置项
const option = {
xAxis: {
type: 'category', // 类目轴
data: xData,
},
yAxis: {
type: 'value', // 数值轴
},
series: [
{
data: yData,
type: 'line',
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
smooth: boolean/number 折线图变平滑
- 是否平滑曲线显示
series: [
{
data: yData,
type: 'line',
smooth: true,
},
],
区域填充样式areaStyle:{}
- 设置后显示成区域面积图
series: [
{
data: yData,
type: 'line',
smooth: true,
areaStyle: {
color: 'skyblue',
},
},
],
显示最大最小以及平均值markPoint:{} 和 markLine:{}
- markPoint:{ } 图表标注,其他的图形也是同理
- markLine:{ } 图表标线,其他的图形也是同理
series: [
{
data: yData,
type: 'line',
smooth: true,
areaStyle: {
color: 'skyblue',
},
markPoint: {
data: [
{
type: 'max', name: 'Max' },
{
type: 'min', name: 'Min' },
],
},
markLine: {
data: [{
type: 'average', name: 'Avg' }],
},
},
],
折线图堆叠效果stack:‘’
- 在
series
系列数组中声明多个对象,里面的每一项对象就是一个折线,如果想让他们都在一组,则它们的stack
必须相同 - 数据堆叠,同个类目轴上系列配置相同的
stack
值可以堆叠放置 - 目前
stack
只支持堆叠于'value'
和'log'
类型的类目轴上(y轴),不支持'time'
和'category'
类型的类目轴
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320],
},
],
经过某一区域,区域高亮emphasis:{}
- 折线图的高亮状态
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series',
},
data: [150, 232, 201, 154, 190, 330, 410],
},
],
散点图scatter
基本散点图
<template>
<div
class="demo02"
ref="box"
style="width: 660px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo03',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
xAxis: {
},
yAxis: {
},
series: [
{
// symbolSize: number / Array / Function 标记的大小
symbolSize: 20,
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',
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
修改标记颜色color和渐变
- 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。 默认为:
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
- 推荐使用color
series: [
{
// symbolSize: number / Array / Function 标记的大小
symbolSize: 20,
// 标记颜色(这种是写死的)
// color: 'skyblue',
// colorBy 取值有series(同一个颜色) data(不同颜色,会取color的默认颜色)
// colorBy: 'data',
// 推荐直接使用color
color: {
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1
// 相当于在图形包围盒中的百分比,如果 globalCoord 为 true,则该四个值是绝对的像素位置
type: 'linear',
x: 0,
y: 0,
x2: 0, // x方向 从左到右,设置的都为0,没往右走,所以不变
y2: 1, // y方向 从上到下,设置的是0到1,从上直接到最下了,所以整个渐变
colorStops: [
{
offset: 0,
color: 'red', // 0% 处的颜色
},
{
offset: 1,
color: 'blue', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
data: [
[10.0, 8.04], // [x轴坐标, y轴坐标]
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
],
type: 'scatter',
},
],
经过标记,标记高亮emphasis:{}
emphasis
里的styleItem
属性中进行设置,如果想要提示框,则可以添加tooltip
tooltip: {
},
series: [
{
// symbolSize: number / Array / Function 标记的大小
symbolSize: 20,
// 标记颜色(这种是写死的)
// color: 'skyblue',
// colorBy 取值有series(同一个颜色) data(不同颜色,会取color的默认颜色)
// colorBy: 'data',
// 推荐直接使用color
color: {
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1
// 相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
type: 'linear',
x: 0,
y: 0,
x2: 0, // x方向 从左到右,设置的都为0,没往右走,所以不变
y2: 1, // y方向 从上到下,设置的是0到1,从上直接到最下了,所以整个渐变
colorStops: [
{
offset: 0,
color: 'pink', // 0% 处的颜色
},
{
offset: 1,
color: 'skyblue', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
// 高亮效果
emphasis: {
itemStyle: {
borderColor: 'pink',
borderWidth: 6,
},
},
data: [
[10.0, 8.04], // x轴坐标,y轴坐标
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[5.02, 5.68],
],
type: 'scatter',
},
],
k线图candlestick
- 上涨下跌都可以很直观的看出来,像股票这种就适合K线图
基本的K线图
<template>
<div
class="demo02"
ref="box"
style="width: 660px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo03',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
xAxis: {
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
},
yAxis: {
},
tooltip: {
// 指示器
axisPointer: {
type: 'cross',
},
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [块的下, 块的上, 线的下, 线的上]
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
],
itemStyle: {
color: 'red', // 上涨颜色
color0: 'green', // 下跌颜色
},
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
图表标注markPoint:{}
markPoint
中有一个data
属性。标注的数据数组。每个数组项是一个对象- 而
data
中有一个valueDim
属性,在使用type
时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是x
、angle
等、candlestick 图时可以是open
、close
等维度名称 type
指定最大值,最小值,平均值
<template>
<div
class="demo02"
ref="box"
style="width: 660px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo03',
data() {
return {
// k线图数据
kData: [
[20, 34, 10, 38], // [块的下, 块的上, 线的下, 线的上]
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42],
],
}
},
computed: {
// 折线图数据
lineData() {
let newData = this.kData.map((item) => item[0])
return newData
},
},
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
xAxis: {
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
},
yAxis: {
},
tooltip: {
// 指示器
axisPointer: {
type: 'cross',
},
},
series: [
{
type: 'candlestick',
data: this.kData,
itemStyle: {
color: 'red', // 上涨颜色
color0: 'green', // 下跌颜色
},
markPoint: {
data: [
{
name: '最大值',
type: 'max',
valueDim: 'highest',
},
{
name: '最小值',
type: 'min',
valueDim: 'lowest',
},
{
name: '平均值',
type: 'average',
valueDim: 'close',
},
],
},
},
{
type: 'line',
smooth: true,
data: this.lineData,
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
雷达图radar
radar
属性只适用于雷达图,雷达图坐标系组件,雷达图使用radar
组件作为其坐标系
- 里面的
indicator
,表示雷达图的指示器,用来指定雷达图中的多个变量(维度) - 里面的
shape
,雷达图绘制类型,支持'polygon'
(默认,雷达图多边形显示) 和'circle'
(雷达图圆形显示)
- 里面的
基本雷达图
<template>
<div
class="demo02"
ref="box"
style="width: 660px; height: 400px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo03',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
title: {
text: '基础雷达图',
},
legend: {
data: ['预算支出', '实际支出'],
},
radar: {
// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)
shape: 'circle',
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [
{
name: '购物', max: 1000 },
{
name: '吃饭', max: 1000 },
{
name: '旅游', max: 1000 },
{
name: '出行', max: 1000 },
{
name: '住宿', max: 1000 },
],
},
series: [
{
name: '基本雷达图',
type: 'radar',
data: [
{
value: [500, 800, 300, 600, 600],
name: '预算支出',
},
{
value: [300, 700, 200, 500, 500],
name: '实际支出',
},
],
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
设置半径radius:number/string/Array
- 设置雷达图半径
radar: {
// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)
shape: 'circle',
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [
{
name: '购物', max: 1000 },
{
name: '吃饭', max: 1000 },
{
name: '旅游', max: 1000 },
{
name: '出行', max: 1000 },
{
name: '住宿', max: 1000 },
],
// 半径
radius: '70%',
},
坐标轴起始位置startAngle:number
- 坐标系起始角度,也就是第一个指示器轴的角度(设置这个属性会进行旋转)
radar: {
// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)
shape: 'circle',
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [
{
name: '购物', max: 1000 },
{
name: '吃饭', max: 1000 },
{
name: '旅游', max: 1000 },
{
name: '出行', max: 1000 },
{
name: '住宿', max: 1000 },
],
// 半径
radius: '70%',
// 图形旋转
startAngle: 180,
},
指示器轴的分割段数splitNumber:number
radar: {
// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)
shape: 'circle',
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [
{
name: '购物', max: 1000 },
{
name: '吃饭', max: 1000 },
{
name: '旅游', max: 1000 },
{
name: '出行', max: 1000 },
{
name: '住宿', max: 1000 },
],
// 半径
radius: '70%',
// 图形旋转
startAngle: 180,
// 指示器轴的分割段数
splitNumber: 3,
},
雷达图每个指示器名称的配置项axisName:{}
radar: {
// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)
shape: 'circle',
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [
{
name: '购物', max: 1000 },
{
name: '吃饭', max: 1000 },
{
name: '旅游', max: 1000 },
{
name: '出行', max: 1000 },
{
name: '住宿', max: 1000 },
],
// 半径
radius: '70%',
// 图形旋转
startAngle: 180,
// 指示器轴的分割段数
splitNumber: 3,
// 雷达图每个指示器名称的配置项
axisName: {
color: 'pink',
formatter: '值是: {value}',
},
},
坐标轴在 grid区域中的分隔区域splitArea:{}
- 默认不显示,可通过
show
来进行显示 areaStyle
可以设置分隔区域的样式
radar: {
// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)
shape: 'circle',
// 雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [
{
name: '购物', max: 1000 },
{
name: '吃饭', max: 1000 },
{
name: '旅游', max: 1000 },
{
name: '出行', max: 1000 },
{
name: '住宿', max: 1000 },
],
// 半径
radius: '60%',
// 图形旋转
startAngle: 180,
// 指示器轴的分割段数
splitNumber: 3,
// 雷达图每个指示器名称的配置项
axisName: {
color: 'pink',
formatter: '值是: {value}',
},
// 坐标轴在 grid区域中的分隔区域
splitArea: {
show: true,
areaStyle: {
color: ['pink', 'skyblue', 'gray'],
shadowColor: '0,0,0,.2',
shadowBlur: 10,
},
},
},
对线段内容设置,需要在series里设置
lineStyle
进行设置线段样式
series: [
{
name: '基本雷达图',
type: 'radar',
data: [
{
value: [500, 800, 300, 600, 600],
name: '预算支出',
// 线条填充
areaStyle: {
color: '#F56C6C',
},
},
{
value: [300, 700, 200, 500, 500],
name: '实际支出',
},
],
lineStyle: {
color: '#fff',
type: 'dotted', // 点线
},
},
],
雷达图分割圈圈的线条splitLine
radar: {
center: ['50%', '50%'],
// 外半径占据容器大小
radius: '55%',
// 指示器轴的分割段数,也就是几个圈圈
splitNumber: 4,
indicator: [
{
name: '商场', max: 100 },
{
name: '地铁', max: 100 },
{
name: '高铁', max: 100 },
{
name: '公交车', max: 100 },
{
name: '汽车', max: 100 },
{
name: '飞机', max: 100 },
],
// 是否变圆,还有多边形
shape: 'circle',
name: {
// 文字颜色(地铁...)
textStyle: {
color: 'rgb(238, 197, 102)',
},
},
// 雷达图分割圈圈的线条
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)',
'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)',
].reverse(),
},
},
splitArea: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)',
},
},
},
指引线样式axisLine
radar: {
center: ['50%', '50%'],
// 外半径占据容器大小
radius: '55%',
// 指示器轴的分割段数,也就是几个圈圈
splitNumber: 4,
indicator: [
{
name: '商场', max: 100 },
{
name: '地铁', max: 100 },
{
name: '高铁', max: 100 },
{
name: '公交车', max: 100 },
{
name: '汽车', max: 100 },
{
name: '飞机', max: 100 },
],
// 是否变圆,还有多边形
shape: 'circle',
name: {
// 文字颜色(地铁...)
textStyle: {
color: 'rgb(238, 197, 102)',
},
},
// 雷达图分割圈圈的线条
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)',
'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)',
'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)',
'rgba(238, 197, 102, 1)',
].reverse(),
},
},
splitArea: {
show: false,
},
// 线条颜色,就是有几个项,就有几条分割线嘛,对应的就是指引线
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)',
},
},
},
漏斗图funnel
基本漏斗图
<template>
<div
class="demo05"
ref="box"
style="width: 660px; height: 400px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo03',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
title: {
text: '基本漏斗图',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
name: '等级',
type: 'funnel',
// 漏斗图位置
left: '10%',
top: 60,
bottom: 60,
width: '80%', // 宽度
min: 0, // 最小值
max: 100, // 最大值
minSize: '0%', //最小百分比
maxSize: '100%', // 最大百分比
sort: 'descending', // 排序,从小到大还是从大到小
data: [
{
value: 60, name: '神器' },
{
value: 40, name: '紫装' },
{
value: 20, name: '白装' },
{
value: 80, name: '传说' },
{
value: 100, name: '史诗' },
],
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
排序sort:‘’/fun
- 数据排序, 可以取
'ascending'
(从小到大),'descending'
(从大到小),'none'
(表示按 data 顺序),或者一个函数(即Array.prototype.sort(function (a, b) { ... })
)。
series: [
{
name: '等级',
type: 'funnel',
// 漏斗图位置
left: '10%',
top: 60,
bottom: 60,
width: '80%', // 宽度
min: 0, // 最小值
max: 100, // 最大值
minSize: '0%', //最小百分比
maxSize: '100%', // 最大百分比
sort: 'descending', // 排序,从小到大还是从大到小
data: [
{
value: 60, name: '神器' },
{
value: 40, name: '紫装' },
{
value: 20, name: '白装' },
{
value: 80, name: '传说' },
{
value: 100, name: '史诗' },
],
},
],
单个漏斗样式itemStyle
series: [
{
name: '等级',
type: 'funnel',
// 漏斗图位置
left: '10%',
top: 60,
bottom: 60,
width: '80%', // 宽度
min: 0, // 最小值
max: 100, // 最大值
minSize: '0%', //最小百分比
maxSize: '100%', // 最大百分比
sort: 'descending', // 排序,从小到大还是从大到小
data: [
{
value: 60, name: '神器' },
{
value: 40, name: '紫装' },
{
value: 20, name: '白装' },
{
value: 80, name: '传说' },
{
value: 100, name: '史诗' },
],
itemStyle: {
borderWidth: 3,
borderColor: '#ccc',
},
},
],
label漏斗图图形上的文本标签
- 可用于说明图形的一些数据信息,比如值,名称等
series: [
{
name: '等级',
type: 'funnel',
// 漏斗图位置
left: '10%',
top: 60,
bottom: 60,
width: '80%', // 宽度
min: 0, // 最小值
max: 100, // 最大值
minSize: '0%', //最小百分比
maxSize: '100%', // 最大百分比
sort: 'descending', // 排序,从小到大还是从大到小
data: [
{
value: 60, name: '神器' },
{
value: 40, name: '紫装' },
{
value: 20, name: '白装' },
{
value: 80, name: '传说' },
{
value: 100, name: '史诗' },
],
itemStyle: {
borderWidth: 3,
borderColor: '#ccc',
},
label: {
show: true,
position: 'inside',
},
},
],
高亮效果emphasis:{}
- 高亮的标签和图形样式
series: [
{
name: '等级',
type: 'funnel',
// 漏斗图位置
left: '10%',
top: 60,
bottom: 60,
width: '80%', // 宽度
min: 0, // 最小值
max: 100, // 最大值
minSize: '0%', //最小百分比
maxSize: '100%', // 最大百分比
sort: 'descending', // 排序,从小到大还是从大到小
data: [
{
value: 60, name: '神器' },
{
value: 40, name: '紫装' },
{
value: 20, name: '白装' },
{
value: 80, name: '传说' },
{
value: 100, name: '史诗' },
],
itemStyle: {
borderWidth: 3,
borderColor: '#ccc',
},
label: {
show: true,
position: 'inside',
},
emphasis: {
label: {
fontSize: 20,
},
},
},
],
仪表盘gauge
基本仪表盘
<template>
<div
class="demo05"
ref="box"
style="width: 660px; height: 400px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo03',
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
name: '基本仪表盘',
type: 'gauge',
detail: {
formatter: '{value}',
},
data: [
{
value: 50,
name: '提示信息',
},
],
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
仪表盘详情,用于显示数据detail:{}
series: [
{
name: '基本仪表盘',
type: 'gauge',
detail: {
formatter: '{value}',
// 是否开启标签的数字动画
valueAnimation: true,
},
data: [
{
value: 50,
name: '提示信息',
},
],
},
],
展示当前进度progress:{}
series: [
{
name: '基本仪表盘',
type: 'gauge',
detail: {
formatter: '{value}',
// 是否开启标签的数字动画
valueAnimation: true,
},
progress: {
show: true, // 是否显示进度条
},
data: [
{
value: 50,
name: '提示信息',
},
],
},
],
关系图graph
基本关系图
layout
图的布局,取值有
'none'
不采用任何布局,使用节点中提供的 x, y 作为节点的位置'circular'
采用环形布局,见示例Les Miserables
,布局相关的配置项见graph.circular
'force'
采用力引导布局,见示例Force
,布局相关的配置项见graph.force
<template>
<div
ref="box"
style="width: 660px; height: 400px; border: 1px solid red"
></div>
</template>
<script>
export default {
name: 'Demo08',
data() {
return {
list: [
{
name: '张三',
id: 0,
},
{
name: '李四',
id: 1,
},
{
name: '王五',
id: 2,
},
{
name: '赵六',
id: 3,
},
],
}
},
mounted() {
// 初始化
var myChart = this.$echarts.init(this.$refs.box)
// 配置项
const option = {
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
},
],
}
// 调用配置方法
myChart.setOption(option)
},
}
</script>
设置点的大小(在关系数组数据中设置)
symbolSize
,直接设置大小
list: [
{
name: '张三',
id: 0,
symbolSize: 10, // 点的大小
},
{
name: '李四',
id: 1,
symbolSize: 13,
},
{
name: '王五',
id: 2,
symbolSize: 16,
},
{
name: '赵六',
id: 3,
symbolSize: 13,
},
],
设置点的相关(在series中设置)
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
itemStyle: {
// 每一项的样式
color: 'pink',
},
},
],
图形上的文本标签修改label:{}
- 可用于说明图形的一些数据信息,比如值,名称等
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
itemStyle: {
color: 'pink',
},
label: {
// 图形上的文字
show: true,
position: 'bottom',
distance: 6, // 距离图形的距离
fontSize: 16,
align: 'center',
},
},
],
设置点与点之间的间距force:{}
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
// 设置每一项的样式
itemStyle: {
color: 'skyblue',
},
// 设置字体的样式
label: {
// 图形上的文字
show: true,
position: 'bottom',
distance: 6, // 距离图形的距离
fontSize: 16,
align: 'center',
},
// 设置间距
focus: {
repulsion: 100, // 点与点之间的
gravity: 0.01, // 距离中心点的位置,值越大节点越往中心点靠拢
edgeLength: 200, // 边的两个节点之间的距离
},
// 节点间的关系数据
links: {
},
},
]
关系数据(数据(点)之间怎么链接),links:[]
- 需要额外设置一个数组数据存放
data() {
return {
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,
},
},
],
}
}
// 节点间的关系数据(怎么连接))
links: this.num,
// 调用配置方法
myChart.setOption(option)
},
}
##### 设置点的大小(在关系数组数据中设置)
- `symbolSize`,直接设置大小
```js
list: [
{
name: '张三',
id: 0,
symbolSize: 10, // 点的大小
},
{
name: '李四',
id: 1,
symbolSize: 13,
},
{
name: '王五',
id: 2,
symbolSize: 16,
},
{
name: '赵六',
id: 3,
symbolSize: 13,
},
],
设置点的相关(在series中设置)
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
itemStyle: {
// 每一项的样式
color: 'pink',
},
},
],
图形上的文本标签修改label:{}
- 可用于说明图形的一些数据信息,比如值,名称等
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
itemStyle: {
color: 'pink',
},
label: {
// 图形上的文字
show: true,
position: 'bottom',
distance: 6, // 距离图形的距离
fontSize: 16,
align: 'center',
},
},
],
设置点与点之间的间距force:{}
series: [
{
type: 'graph',
data: this.list,
layout: 'force', // 图的布局
// 设置每一项的样式
itemStyle: {
color: 'skyblue',
},
// 设置字体的样式
label: {
// 图形上的文字
show: true,
position: 'bottom',
distance: 6, // 距离图形的距离
fontSize: 16,
align: 'center',
},
// 设置间距
focus: {
repulsion: 100, // 点与点之间的
gravity: 0.01, // 距离中心点的位置,值越大节点越往中心点靠拢
edgeLength: 200, // 边的两个节点之间的距离
},
// 节点间的关系数据
links: {
},
},
]
关系数据(数据(点)之间怎么链接),links:[]
- 需要额外设置一个数组数据存放
data() {
return {
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,
},
},
],
}
}
// 节点间的关系数据(怎么连接))
links: this.num,
原文链接:https://blog.csdn.net/qq_52845451/article/details/129704086
此处评论已关闭