前端学习笔记（12）-Echarts

1.Vue中Echarts配置

引入Echarts

import echarts from ‘echarts’

调用Echarts为全局变量，在main.ts全局挂载

app.config.globalProperties.$echarts = echarts;

2.Echarts实现

2.1准备一个具备大小的Dom

<template>
  <div id="main"
       style="width: 300px; height: 300px"></div>
</template>

2.2初始化echarts实例

var chartDom = document.getElementById('main')!
var myChart = echarts.init(chartDom)

2.3指定配置项和数据

option = {
        // tooltip提示框组件
        tooltip: {
          trigger: 'item',
        },
        // legend配置项中定义textStyle属性设置颜色即可
        legend: {
          top: '5%',
          left: 'center',
          textStyle:{
            color:'black'
          }
        },
        
        series: [
          {
           
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            // avoidLabelOverlap是否启用防止标签重叠策略
            avoidLabelOverlap: false,
            // 单item样式
            itemStyle: {
              // 边框
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            // 饼图图形上的文本标签，中间初始不显示标签
            label: {
              show: false,
              position: 'center',
            },
            //高亮状态的扇区和标签样式
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            //标签的视觉引导线配置。
            labelLine: {
              show: false,
            },
            // 数据
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      }

2.4将配置项设置给echarts实例对象

option && myChart.setOption(option)

2.5 Vue3实现echarts

在之前的学习中我们知道，在onMounted这个生命周期阶段，DOM挂载完毕，我们就可以在这个阶段获取最开始准备的具备大小的DOM，并且完成对应的配置。

完整代码

<template>
  <div id="main"
       style="width: 300px; height: 300px"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue' // 主要

import * as echarts from 'echarts'
import { provide } from 'vue'
provide('echarts', echarts)
export default defineComponent({
  name: 'echartTest4',

  setup() {
    onMounted(() => {
      type EChartsOption = echarts.EChartsOption
      // 配置项
      var chartDom = document.getElementById('main')!
      var myChart = echarts.init(chartDom)
      var option: EChartsOption
      // setoption实现数据更新
      option = {
        // tooltip提示框组件
        tooltip: {
          trigger: 'item',
        },
        // legend配置项中定义textStyle属性设置颜色即可
        legend: {
          top: '5%',
          left: 'center',
          textStyle:{
            color:'black'
          }
        },
        
        series: [
          {
           
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            // avoidLabelOverlap是否启用防止标签重叠策略
            avoidLabelOverlap: false,
            // 单item样式
            itemStyle: {
              // 边框
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            // 饼图图形上的文本标签，中间初始不显示标签
            label: {
              show: false,
              position: 'center',
            },
            //高亮状态的扇区和标签样式
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            //标签的视觉引导线配置。
            labelLine: {
              show: false,
            },
            // 数据
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      }

      option && myChart.setOption(option)
    })
    return {
      // ...toRefs(data)
    }
  },
})
</script>

<style lang="scss" scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}

#maychar {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
</style>

在组件中实现：

3.Echarts异步数据的加载与动态更新

前面的示例的示例的数据是直接填入的，但是很多时候我们使用echarts图表的时候，数据是在初始化后直接在setOption中配置的，但是很多时候我们需要的数据可能是需要发请求异步获取到数据后再去渲染图表数据，也就是数据的动态更新问题。

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。这是官网的例子：

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function(data) {
  // data 的结构:
  // {
  //     categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  //     values: [5, 20, 36, 10, 10, 20]
  // }
  myChart.setOption({
    title: {
      text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {},
    xAxis: {
      data: data.categories
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: data.values
      }
    ]
  });
});

写配置项的时候会有多种方法，因为当请求拿到数据之后我还要再次渲染数据，更新配置项，所以这里可以把配置项单独封装为一个函数，使用的时候再去调用。

//先声明一个myChart
let myChart;
//配置项函数
const chartOption = (data) => myChart.setOption({
  //里面写你需要的配置项信息
});
 
//当挂载的时候去初始化图表
onMounted(() => {
  myChart = echarts.init(document.getElementById('main'));
  //调用配置项，传入变量名
  chartOption(cpudata.value)
  //echarts响应式
  proxy.$echartsResize(myChart)
})

或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据:

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
  title: {
    text: '异步数据加载示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: []
    }
  ]
});

// 异步加载数据
$.get('data.json').done(function(data) {
  // 填入数据
  myChart.setOption({
    xAxis: {
      data: data.categories
    },
    series: [
      {
        // 根据名字对应到相应的系列
        name: '销量',
        data: data.data
      }
    ]
  });
});

Vue3中可以将watchEffect结合this.$nextTick实现，将属性配置移至计算属性、监视属性进行，实现动态加载。

nextTick是vue提供出来更新视图之后回调的函数，也就是说我们在操作dom更新视图的时候，由于vue的视图渲染是异步的，可能会导致一些视图已经更新了，但是我们获取到的视图数据信息不是最新的，使用nextTick可以保证视图在下一次更新之后进行调用

4.常用配置项

4.1折线/面积图

series-line	折线/面积图
colorBy = 'series'	从调色盘 option.color 中取色的策略，可取值为： 'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色（默认）； 'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
coordinateSystem	'cartesian2d'：使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。（默认） 'polar：使用极坐标系，通过 polarIndex 指定相应的极坐标组件
xAxisIndex	使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex	使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
polarIndex	使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。
symbol	标记的图形：ECharts 提供的标记类型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，'emptyCircle'（默认）可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
symbolSize	标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。默认为4
showSymbol	是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
connectNulls	是否连接空数据。
step	是否是阶梯线图。可以设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end' 分别配置在当前点，当前点与下个点的中间点，下个点拐弯。
label	图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 label. show：是否显示标签。 label. position ：标签的位置。可以通过内置的语义声明位置：示例： `position: 'top'` 支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight label. formatter ：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。字符串模板模板变量有： {a}：系列名。 {b}：数据名。 {c}：数据值。 {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。 {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。示例： `formatter: '{b}: {@score}'`
endLabel	折线端点的标签配置。
labelLine	标签的视觉引导线配置。
labelLayout	标签的统一布局配置。该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。
itemStyle	折线拐点标志的样式。
lineStyle	线条样式。
areaStyle	区域填充样式。设置后显示成区域面积图。
emphasis	折线图的高亮状态。
data	系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。可以使用 series.datasetIndex 指定其他的 dataset。通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。
markLine	图表标线配置。
animation	是否开启动画，默认开启。

4.2柱状图

series-bar	柱状图
colorBy = 'series'	从调色盘 option.color 中取色的策略，可取值为： 'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色（默认）； 'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
coordinateSystem	'cartesian2d'：使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。（默认） 'polar：使用极坐标系，通过 polarIndex 指定相应的极坐标组件
xAxisIndex	使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex	使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
roundCap	是否在环形柱条两侧使用圆弧效果。仅对极坐标系柱状图有效。
polarIndex	使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。
realtimeSort	是否开启实时排序，用来实现动态排序图效果，具体参见手册中动态排序柱状图的教程。
showBackground	是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
backgroundStyle	每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。 backgroundStyle. color:柱条的颜色。 backgroundStyle. borderColor:柱条的描边颜色。 backgroundStyle. borderWidth:柱条的描边宽度，默认不描边。
label	图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 label. show：是否显示标签。 label. position ：标签的位置。可以通过内置的语义声明位置：示例： `position: 'top'` 支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight label. formatter ：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。字符串模板模板变量有： {a}：系列名。 {b}：数据名。 {c}：数据值。 {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。 {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。示例： `formatter: '{b}: {@score}'`
labelLine	标签的视觉引导线配置。
itemStyle	柱条图像样式。
labelLayout	标签的统一布局配置。该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。
emphasis	高亮的图形样式和标签样式。
blur	淡出时的图形样式和标签样式。开启 emphasis.focus 后有效。
select	数据选中时的图形样式和标签样式。开启 selectedMode 后有效。
seriesLayoutBy	当使用 dataset 时，seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上，也就是说，系列“排布”到 dataset 的行还是列上。可取值： 'column'：默认，dataset 的列对应于系列，从而 dataset 中每一列是一个维度（dimension）。 'row'：dataset 的行对应于系列，从而 dataset 中每一行是一个维度（dimension）。
datasetIndex	如果 series.data 没有指定，并且 dataset 存在，那么就会使用 dataset。datasetIndex 指定本系列使用那个 dataset。
data	系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。可以使用 series.datasetIndex 指定其他的 dataset。
markLine	图表标线。
animation	是否开启动画，默认开启。

4.3 饼图

series-bar	柱状图
colorBy = 'data'	从调色盘 option.color 中取色的策略，可取值为： 'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色； 'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。(默认)
coordinateSystem	该系列使用的坐标系，可选： null 或者 'none' 无坐标系。 'geo' 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。 'calendar' 使用日历坐标系，通过 calendarIndex 指定相应的日历坐标系组件。 'none' 不使用坐标系。
legendHoverLink	是否启用图例 hover 时的联动高亮。
selectedMode	选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，'series' 分别表示单选，多选以及选择整个系列。默认false。
selectedOffset	选中扇区的偏移距离。默认10.
clockwise	饼图的扇区是否是顺时针排布。默认true。
startAngle	起始角度，支持范围[0, 360]。默认90。
minAngle	最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。默认0。
minShowLabelAngle	小于这个角度（0 ~ 360）的扇区，不显示标签（label 和 labelLine）。默认0。
roseType	是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式： 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。默认为false
stillShowZeroSum	是否在数据和为0（一般情况下所有数据为0）的时候仍显示扇区。默认true。
percentPrecision	饼图百分比数值的精度，默认保留小数点后两位。
cursor	鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。默认为'pointer'
left	pie chart组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
top	pie chart组件离容器上侧的距离。 top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
right	pie chart组件离容器右侧的距离。 right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
bottom	pie chart组件离容器下侧的距离。 bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。以上默认均为0
width	pie chart组件的宽度。默认自适应。
height	pie chart组件的高度。默认自适应。
showEmptyCircle	是否在无数据的时候显示占位圆，默认true
emptyCircleStyle	占位圆样式。
label	图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 label. show：是否显示标签。 label. position ：标签的位置。可选： 'outside' 饼图扇区外侧，通过视觉引导线连到相应的扇区。 'inside' 饼图扇区内部。 'inner' 同 'inside'。 'center' label. formatter ：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。字符串模板字符串模板模板变量有： {a}：系列名。 {b}：数据名。 {c}：数据值。 {d}：百分比。 {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。 {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。示例： `formatter: '{b}: {d}'`
itemStyle	图形样式。 itemStyle. color ：图形的颜色。默认从全局调色盘 option.color 获取颜色。 itemStyle. borderColor ：图形的描边颜色。支持的颜色格式同 color，不支持回调函数。 itemStyle. borderType：描边类型。可选： 'solid' 'dashed' 'dotted' 自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。例如： `{ borderType: [5, 10], borderDashOffset: 5 }` itemStyle.borderDashOffset:用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。 itemStyle.borderCap:用于指定线段末端的绘制方式，可以是： 'butt': 线段末端以方形结束。 'round': 线段末端以圆形结束。 'square': 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。默认值为 'butt'。 itemStyle. shadowColor：阴影颜色。支持的格式同color。 itemStyle. shadowOffsetX：阴影水平方向上的偏移距离。 itemStyle. shadowOffsetY：阴影垂直方向上的偏移距离。
emphasis	高亮状态的扇区和标签样式。可以使用label、labelLine、itemStyle
blur	淡出状态的扇区和标签样式。开启 emphasis.focus 后有效。
select	选中状态的扇区和标签样式。开启 selectedMode 后有效。
center	饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。默认：['50%', '50%']
radius	饼图的半径。可以为如下类型： number：直接指定外半径值。 string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。 Array.<number\|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。可以将内半径设大显示成圆环图（Donut chart）。默认：[0, '75%']
datasetIndex	如果 series.data 没有指定，并且 dataset 存在，那么就会使用 dataset。datasetIndex 指定本系列使用那个 dataset。
data	系列中的数据内容数组。数组项可以为单个数值，如： `[12, 34, 56, 10, 23]` 如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如： `[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]` 这时候可以将每项数组中的第二个值指定给 visualMap 组件。
markPoint	图表标注
markLine	图表标线
silent	图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
tooltip	本系列特定的 tooltip 设定。（略）

5.补充

官网给出好多示例的链接：点这里