Echars学习笔记

九大系列图解

Vue引入Echars

vue2

全局引入

1. 首先进行Echars安装

npm install echarts --save

2. 然后在需要的文件中引入 / 或者直接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

3. 设置一个容器（容器至少要有高！）

<div
  ref="box"
  style="width: 600px; height: 300px; border: 1px solid red"
></div>

4. 初始化echarts实例

// 1. 使用的文件中引入
var myChart = echarts.init(this.$refs.box)

// 2. mian.js  直接把echarts挂载到vue实例上
var myChart = this.$echarts.init(this.$refs.box)

5. 进行配置并使用

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，视觉引导项第一段的长度
• 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时有效，用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称，例如折线图时可以是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图的布局，取值有
  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,