微客导航 » 文章资讯 » 在vue中使用vue-echarts-v3的实例代码

在vue中使用vue-echarts-v3的实例代码

2023-09-08 05:27:04 136

特征

•轻量，高效，按需绑定事件
•支持按需导入ECharts.js图表和组件
•支持组件调整大小事件自动更新视图

一、安装

npminstall--saveechartsvue-echarts-v3

二、用法

用vue-cli搭建的项目，打开build文件夹中的webpack.base.conf.js文件

1、webpack1.x修改成如下

{
test:/\.js$/,
loader:'babel',
include:[
path.join(prjRoot,'src'),
path.join(prjRoot,'node_modules/vue-echarts-v3/src')
],
exclude:/node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
},

2、webpack2.x修改成如下

{
test:/\.js$/,
loader:'babel-loader',
include:[resolve('src'),resolve('test'),resolve('node_modules/vue-echarts-v3/src')]
}

3、导入所有图表和组件

importIEchartsfrom'vue-echarts-v3/src/full.js';

4、手动导入ECharts.js模块以减少捆绑包大小

importIEchartsfrom'vue-echarts-v3/src/lite.js';
import'echarts/lib/component/title';//引入标题组件
import'echarts/lib/component/legend';//引入图例组件
import'echarts/lib/component/tooltip';//引入提示框组件
import'echarts/lib/component/toolbox';//引入工具箱组件
//...(引入自己需要的)
import'echarts/lib/chart/pie';//以饼图为例

三、例子

关于Echarts的API使用参照Echarts官网

•从接口获取的动态数据可以直接通过props从父组件传过来，替换下面的series[0].data数组中的数据
•也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computed中return出来,不能再写在data中，否则获取不到数据




.echarts{
width:400px;
height:400px;
margin:auto;
text-align:center;
}

总结

以上所述是小编给大家介绍的在vue中使用vue-echarts-v3的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

在vue中使用vue-echarts-v3的实例代码

热门推荐

随机推荐