Vue 使用 vue-echart

1.安装echart

 npm install vue-echart

2.man.js中导入echart

import Vue from 'vue'
import App from './App'
import router from '../src/router/router'
// 导入vue-echarts插件
import ECharts from 'vue-echarts/components/ECharts'
// 按需导入echarts的图形类型
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
// 导入工具部分
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title';
// register component to use
import 'echarts/lib/component/legendScroll';
// register component to use
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markArea';
import 'echarts/lib/component/dataZoom';
// 全局注册chart组件
Vue.component('chart', ECharts)

3.使用







vue-echart样式可以按照echart官网样式表修改
图形显示:
Vue 使用 vue-echart_第1张图片
Vue 使用 vue-echart_第2张图片

你可能感兴趣的:(Vue)