一、 在vue
项目开发中使用echarts
,推荐使用vue-echarts
官方地址
二、vue
项目集成vue-echarts
- 1、使用
vue-cli
创建一个项目 2、安装依赖包
yarn add vue-echarts
3、在组件中使用
<template> <div> <chart :options="chartPieData" auto-resize ref="chartPie" :style="{width: '100%'}"></chart> </div> </template> <script> import ECharts from 'vue-echarts' import 'echarts/lib/chart/pie' export default { data () { return { chartPieData: { // 直接去echarts官方复制,里面的api跟echarts官网的一样 } } }, methods: { // 重置图表大小 chartResize () { window.setTimeout(() => { this.$refs.chartPie.resize() }, 60) } }, mounted () { window.addEventListener('resize', this.chartResize) }, destroyed () { window.removeEventListener('resize', this.chartResize) }, components: { chart: ECharts } } </script> <style scoped> </style>
- 4、更多信息可以查看相应的
api