wl-echarts v1.0.3

安装 & 使用

npm & ESM

$ npm install echarts wl-echarts

要在 Vue 2（<2.7.0）下使用 wl-echarts，需要安装 @vue/composition-api ：

npm i -D @vue/composition-api

如果你在使用基于 Vue 2 的 NuxtJS，那么还要安装 @nuxtjs/composition-api：

npm i -D @nuxtjs/composition-api

然后在 nuxt.config.js 的 buildModules 选项中添加 '@nuxtjs/composition-api/module'。

示例

<template>
  <wl-chart class="chart" :option="option" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import WlChart, { THEME_KEY } from "wl-echarts";
import { ref, provide } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

provide(THEME_KEY, "dark");

const option = ref({
  title: {
    text: "Traffic Sources",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
  },
  series: [
    {
      name: "Traffic Sources",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [
        { value: 335, name: "Direct" },
        { value: 310, name: "Email" },
        { value: 234, name: "Ad Networks" },
        { value: 135, name: "Video Ads" },
        { value: 1548, name: "Search Engines" }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

<template>
  <wl-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import WlChart, { THEME_KEY } from "wl-echarts";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: "HelloWorld",
  components: {
    WlChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  data() {
    return {
      option: {
        title: {
          text: "Traffic Sources",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "Direct",
            "Email",
            "Ad Networks",
            "Video Ads",
            "Search Engines"
          ]
        },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 234, name: "Ad Networks" },
              { value: 135, name: "Video Ads" },
              { value: 1548, name: "Search Engines" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。前往 →

但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：

import "echarts";

CDN & 全局变量

用如下方式在 HTML 中插入 <script> 标签，并且通过 window.WlECharts 来访问组件接口：

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
<script src="https://cdn.jsdelivr.net/npm/wl-echarts@1.0.3"></script>

const app = Vue.createApp(...)

// 全局注册组件（也可以使用局部注册）
app.component('wl-chart', WlECharts)

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
<script src="https://cdn.jsdelivr.net/npm/wl-echarts@1.0.3"></script>

// 全局注册组件（也可以使用局部注册）
Vue.component("wl-chart", WlECharts);

Prop

• init-options: object

  初始化附加参数。请参考 echarts.init 的 opts 参数。前往 →

  Inject 键名：INIT_OPTIONS_KEY。

• theme: string | object

  要应用的主题。请参考 echarts.init 的 theme 参数。前往 →

  Inject 键名：THEME_KEY。

• option: object

  ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 setOption 方法。查看详情 →

  💡 在没有指定 update-options 时，如果直接修改 option 对象而引用保持不变，setOption 方法调用时将默认指定 notMerge: false；否则，如果为 option 绑定一个新的引用，将指定 notMerge: true。

• update-options: object

  图表更新的配置项。请参考 echartsInstance.setOption 的 opts 参数。前往 →

  Inject 键名：UPDATE_OPTIONS_KEY。

• group: string

  图表的分组，用于联动。请参考 echartsInstance.group。前往 →

• autoresize: boolean（默认值false）

  图表在组件根元素尺寸变化时是否需要自动进行重绘。

• loading: boolean（默认值：false）

  图表是否处于加载状态。

• loading-options: object

  加载动画配置项。请参考 echartsInstance.showLoading 的 opts 参数。前往 →

  Inject 键名：LOADING_OPTIONS_KEY。

• manual-update: boolean（默认值false）

  在性能敏感（数据量很大）的场景下，我们最好对于 option prop 绕过 Vue 的响应式系统。当将 manual-update prop 指定为 true 且不传入 option prop 时，数据将不会被监听。然后，需要用 ref 获取组件实例以后手动调用 setOption 方法来更新图表。

事件

可以使用 Vue 的 v-on 指令绑定事件。

<template>
  <wl-chart :option="option" @highlight="handleHighlight" />
</template>

Note

仅支持 .once 修饰符，因为其它修饰符都与 DOM 事件机制强耦合。

Wl-ECharts 支持如下事件：

• highlight →
• downplay →
• selectchanged →
• legendselectchanged →
• legendselected →
• legendunselected →
• legendselectall →
• legendinverseselect →
• legendscroll →
• datazoom →
• datarangeselected →
• timelinechanged →
• timelineplaychanged →
• restore →
• dataviewchanged →
• magictypechanged →
• geoselectchanged →
• geoselected →
• geounselected →
• axisareaselected →
• brush →
• brushEnd →
• brushselected →
• globalcursortaken →
• rendered →
• finished →
• 鼠标事件
  • click →
  • dblclick →
  • mouseover →
  • mouseout →
  • mousemove →
  • mousedown →
  • mouseup →
  • globalout →
  • contextmenu →
• ZRender 事件
  • zr:click
  • zr:mousedown
  • zr:mouseup
  • zr:mousewheel
  • zr:dblclick
  • zr:contextmenu

请参考支持的事件列表。前往 →

Provide / Inject

Wl-ECharts 为 theme、init-options、update-options 和 loading-options 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 init-options 提供上下文配置：

import { THEME_KEY } from 'wl-echarts'
import { provide } from 'vue'

// 组合式 API
provide(THEME_KEY, 'dark')

// 选项式 API
{
  provide: {
    [THEME_KEY]: 'dark'
  }
}

import { THEME_KEY } from 'wl-echarts'

// 组件选项中
{
  provide: {
    [THEME_KEY]: 'dark'
  }
}

Note

在 Vue 2 中，如果你想动态地改变这些选项，那么你需要提供一个对象。

// 组件选项中
{
  data () {
    return {
      theme: { value: 'dark' }
    }
  },
  provide () {
    return {
      [THEME_KEY]: this.theme
    }
  }
}

方法

• setOption →
• getWidth →
• getHeight →
• getDom →
• getOption →
• resize →
• dispatchAction →
• convertToPixel →
• convertFromPixel →
• containPixel →
• showLoading →
• hideLoading →
• getDataURL →
• getConnectedDataURL →
• clear →
• dispose →

静态方法

静态方法请直接通过 echarts 本身进行调用。

CSP: style-src 或 style-src-elem

如果你正在应用 CSP 来防止内联 <style> 注入，则需要使用 dist/csp 目录中的文件，并手动引入 dist/csp/style.css。