hxDocs

Appearance

Echarts ​

上次更新 2024年10月20日星期日 6:32:49 字数 0 字 时长 0 分钟

扩展站点好用极了

Echarts 介绍 ​

Echarts 是一个基于 JavaScript 的开源可视化库，它提供了许多强大的图表和数据可视化组件，可以帮助您轻松地创建交互式的数据可视化。在本篇回答中，我将为您精细介绍 ECharts 的基本概念、使用方法和常见图表类型。

实例化 ​

要使用 ECharts，您需要先创建一个 ECharts 实例。可以使用以下代码创建一个简单的 ECharts 实例：

javascript
// 引入 ECharts
import echarts from "echarts";

// 初始化 ECharts 实例
const myChart = echarts.init(document.getElementById("myChart"));

在上面的代码中，我们首先使用 import 语句引入了 ECharts，然后使用 echarts.init 方法创建了一个 ECharts 实例，并将其绑定到一个 HTML 元素上。

配置项 ​

在创建 ECharts 实例后，您需要使用配置项来指定图表的类型、数据和样式等信息。ECharts 的配置项是一个 JavaScript 对象，其中包含了许多属性和方法，用于定义图表的各个组件、样式和数据等。

以下是一个简单的 ECharts 配置项示例：

javascript
const option = {
  title: {
    text: "某站点用户访问来源",
    subtext: "纯属虚构",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: 10,
    data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "30",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
    },
  ],
};

// 使用配置项初始化图表
myChart.setOption(option);

在上面的代码中，我们创建了一个饼图，并使用配置项定义了图表的标题、提示框、图例、系列数据等信息。最后，我们使用 myChart.setOption 方法将配置项应用到图表中。

数据格式 ​

在 ECharts 中，数据格式是非常重要的。ECharts 支持多种数据格式，包括数组、对象和 JSON 等。以下是一个简单的数据格式示例：

javascript
const data = [
  { name: "直接访问", value: 335 },
  { name: "邮件营销", value: 310 },
  { name: "联盟广告", value: 234 },
  { name: "视频广告", value: 135 },
  { name: "搜索引擎", value: 1548 },
];

在上面的代码中，我们使用一个包含多个对象的数组来表示数据。每个对象都包含了一个 name 属性和一个 value 属性，分别表示数据的名称和值。

常见图表类型 ​

ECharts 提供了多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图等。以下是一些常见的图表类型及其示例代码：

折线图 ​

javascript
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

柱状图 ​

javascript
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};

饼图 ​

javascript
const option = {
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: "50%",
      data: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
    },
  ],
};

散点图 ​

javascript
const option = {
  xAxis: {
    type: "value",
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81],
        [11.0, 8.33],
        [14.0, 9.96],
        [6.0, 7.24],
        [4.0, 4.26],
        [12.0, 10.84],
        [7.0, 4.82],
        [5.0, 5.68],
      ],
      type: "scatter",
    },
  ],
};

雷达图 ​

javascript
const option = {
  radar: {
    indicator: [
      { name: "销售", max: 6500 },
      { name: "管理", max: 16000 },
      { name: "信息技术", max: 30000 },
      { name: "客服", max: 38000 },
      { name: "研发", max: 52000 },
      { name: "市场", max: 25000 },
    ],
  },
  series: [
    {
      name: "预算 vs 开销",
      type: "radar",
      data: [
        {
          value: [4300, 10000, 28000, 35000, 50000, 19000],
          name: "预算",
        },
        {
          value: [5000, 14000, 28000, 31000, 42000, 21000],
          name: "开销",
        },
      ],
    },
  ],
};

地图 ​

javascript
const option = {
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} (p / km²)",
  },
  visualMap: {
    min: 800,
    max: 50000,
    text: ["High", "Low"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["lightskyblue", "yellow", "orangered"],
    },
  },
  series: [
    {
      name: "中国",
      type: "map",
      mapType: "china",
      label: {
        show: true,
      },
      data: [
        { name: "北京", value: 20057.34 },
        { name: "天津", value: 15477.48 },
        { name: "上海", value: 19150.76 },
        { name: "重庆", value: 31446.33 },
        { name: "河北", value: 17140.51 },
        { name: "河南", value: 16038.15 },
        { name: "云南", value: 12559.04 },
      ],
    },
  ],
};

VueEcharts 组件 ​

属性 ​

propsdecsriptiontypedefault
height最外层高度string|Number100%
width最外层宽度String |Number100%
options等同于 echarts 的 optionsObject{}
id当前 echarts div 的 idString''
headerbackground组件上方的自定义 title 样式String‘’
headerTitle取自 options.nameString

具体实现代码
index.vue
vue
<script setup >
import { nextTick, onMounted, ref, watch, watchEffect, onBeforeUnmount } from "vue"
import { markRaw } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
    height: {
        type: [String, Number],
        default: '500px'
    },
    width: {
        type: [String, Number],
        default: '100%'
    },
    options: {
        type: Object,
        default: {}
    },
    id: {
        type: String,
        default: ''
    }
})
const echartsDom = ref(null)
const chartInit = ref(null)
let echartsLister = null
onMounted(() => {
    nextTick(() => {
        echartsDom.value = document.getElementById(props.id)
        chartInit.value = markRaw(echarts.init(echartsDom.value));
        echartsLister = () => { chartInit.value.resize() }
        window.addEventListener("resize", echartsLister);
        chartInit.value.setOption(props.options, true)
        // console.log(chartInit.value.getDataURL());
    })
})
watch(() => props.options, () => {
    if (chartInit.value) {
        chartInit.value.setOption(props.options, true)
    }
},
    { deep: true }
)
// 销毁resize事件
onBeforeUnmount(() => {
    echartsLister && window.removeEventListener('resize', echartsLister)
})


</script>

<template>
    <div class="echart_ctn" :style="{ height: props.height, width: props.width }">
        <div class="title" :style="headerStyle" v-if="props.options.name">
            {{ props.options.name }}
        </div>
        <div :id="props.id" :ref="props.id + 'Dom'" class="echart_view"></div>
    </div>
</template>

<style scoped lang="scss">
.echart_ctn {
    display: flex;
    flex-direction: column;

    .title {
        box-sizing: border-box;
        padding: 1% 0;
        width: 70%;
        text-align: center;
        font-size: 18.792px;
        font-family: "Microsoft YaHei";
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: auto;

        &::before,
        &::after {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: blueviolet;
            border: 1px solid #000;
            border-radius: 50%;
            transform: translateY(-50%);
            filter: brightness(120%);
        }

        &::before {
            margin-right: 5px;
        }

        &::after {
            margin-left: 5px;
        }
    }

    .echart_view {
        flex: 1;
    }
}
</style>

结语 ​

以上是 ECharts 的基本概念、使用方法和常见图表类型的介绍。ECharts 是一款非常强大的数据可视化工具，可以帮助您轻松地创建交互式的数据可视化。如果您对 ECharts 感兴趣，可以访问官方网站（https://echarts.apache.org/）了解更多信息。

上次更新:

关注公众号

Copyright © 2019-present Haixin Yang