九大系列图解
在这里插入图片描述

Vue引入Echars

vue2

全局引入

  1. 首先进行Echars安装
npm install echarts --save
  1. 然后在需要的文件中引入 / 或者直接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
  1. 设置一个容器(容器至少要有高!)
<div
  ref="box"
  style="width: 600px; height: 300px; border: 1px solid red"
></div>
  1. 初始化echarts实例
// 1. 使用的文件中引入
var myChart = echarts.init(this.$refs.box)

// 2. mian.js  直接把echarts挂载到vue实例上
var myChart = this.$echarts.init(this.$refs.box)
  1. 进行配置并使用
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是我们需要的数据(在seriesdata属性设置的)

  • 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
  • 位置,leftrightbottom同理
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可以设置为truefalse,默认为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属性,也就是饼图的半径,值可以是numberstringArray类型的

  • 取值可以是百分比,具体的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,视觉引导项第一段的长度
  • length2,视觉引导项第二段的长度
// 控制引导线的样式
  labelLine: {
show: true, length: 6, length2: 8, },
设置为南丁格尔图roseType:boolean/string

在这里插入图片描述

  • 是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
    1. 'radius' 扇区圆心角展现数据的百分比,半径展现数据的大小
    2. '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时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称
  • 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图的布局,取值有
    1. 'none' 不采用任何布局,使用节点中提供的 x, y 作为节点的位置
    2. 'circular' 采用环形布局,见示例 Les Miserables,布局相关的配置项见 graph.circular
    3. '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

最后修改:2023 年 10 月 30 日
如果觉得我的文章对你有用,请随意赞赏