vue3 ts 引入echarts

Echarts Page：https://echarts.apache.org/handbook/zh/get-started/

---

TS： https://echarts.apache.org/handbook/zh/basics/import

---

install

npm install echarts --save

create echart.ts

// 引入 echarts 核心模块。
import * as echarts from 'echarts/core';
//引入柱状图和折线图组件。
import { BarChart,LineChart,PieChart  } from 'echarts/charts';
// 引入标题、提示框、网格、数据集和数据转换器组件。
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    // 数据集组件
    DatasetComponent,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
    ToolboxComponent
} from 'echarts/components';
//引入标签布局和通用过渡动画特性。
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器。
import { CanvasRenderer } from 'echarts/renderers';
 
import type {
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineSeriesOption
} from 'echarts/charts';
 
import type {
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    DatasetComponentOption,
    LegendComponentOption,
} from 'echarts/components';
import type {
    ComposeOption,
} from 'echarts/core';
 
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>;
 
/** 
    注册必须的组件，包括标题、提示框、网格、数据集、数据转换器，
    以及柱状图、折线图、标签布局、通用过渡动画和 Canvas 渲染器。
*/
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent,
    ToolboxComponent,
    TransformComponent,
    BarChart,
    PieChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
// 导出
export default echarts;

Using echart.ts

// useing template
import  * as echarts from '@/assets/spp/echart';
// options
let myChart = echarts.default.getInstanceByDom(document.getElementById('helloworld'));
if (myChart== null) {
    myChart =echarts.default.init(document.getElementById('helloworld'))
}else{
  myChart.dispose()
  myChart =echarts.default.init(document.getElementById('helloworld'))
}
// Draw a chart
myChart.setOption({
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      // dataView: { show: true, readOnly: false },
      // restore: { show: true },
      // saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 140],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
});

End…

原文地址：https://blog.csdn.net/qq_43784821/article/details/139864335

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！