vue-echarts-v3

vue-echarts-v3

vue-echarts-v3 介绍

特征

轻量，高效，按需绑定事件;

支持按需导入ECharts.js图表​​和组件;

支持组件调整大小事件自动更新视图;

安装

npm install --save echarts vue-echarts-v3

用法

<template><div class="echarts"><IEcharts:option="bar":loading="loading"@ready="onReady"@click="onClick"/><button @click="doRandom">Random</button></div></template><script type="text/babel">import IEcharts from 'vue-echarts-v3/src/full.js';export default {name: 'view',components: {IEcharts},props: {},data: () => ({loading: true,bar: {title: {text: 'ECharts Hello World'},tooltip: {},xAxis: {data: ['Shirt','Sweater','Chiffon Shirt','Pants','High Heels','Socks']},yAxis: {},series: [{name: 'Sales',type: 'bar',data: [5,20,36,10,20]}]}}),methods: {doRandom() {const that = this;let data = [];for (let i = 0,min = 5,max = 99; i < 6; i++) {data.push(Math.floor(Math.random() * (max + 1 - min) + min));}that.loading = !that.loading;that.bar.series[0].data = data;},onReady(instance,ECharts) {console.log(instance,ECharts);},onClick(event,instance,ECharts) {console.log(arguments);}}};</script><style scoped>.echarts {width: 400px;height: 400px;}</style>链接: http://www.fly63.com/nav/2255

网站地址:https://xlsdg.org/vue-echarts-v3-demo/

GitHub:https://github.com/xlsdg/vue-echarts-v3

网站描述:ECharts.js的Vue.js组件包装

vue-echarts-v3官方网站

官方网站：https://xlsdg.org/vue-echarts-v3-demo/

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。