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/
小编说
以上是编程之家为你收集整理的vue-echarts-v3全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。