echarts文件

  • u1_374164
    了解作者
  • 1.9MB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-05 08:04
    上传日期
使用vue框架时用来简化echarts的引用,使用echarts时不在需要全局引用或者局部引用时引用一大堆的东西
vue-echarts-v3.rar
  • _vue-echarts-v3@1.0.5@vue-echarts-v3
  • src
  • full.vue
    449B
  • full.js
    61B
  • lite.js
    61B
  • wrapper.js
    10.6KB
  • lite.vue
    464B
  • dev.js
    1.2KB
  • dist
  • js
  • full.js
    679.5KB
  • full.js.map
    6.1MB
  • node_modules
  • element-resize-event
  • vue
  • element-resize-detector
  • echarts
  • lodash.debounce
  • LICENSE
    1KB
  • README.md
    5.5KB
  • .npminstall.done
    54B
  • package.json
    2.1KB
  • vue-echarts-v3
  • src
  • full.vue
    449B
  • full.js
    61B
  • lite.js
    61B
  • wrapper.js
    10.6KB
  • lite.vue
    464B
  • dev.js
    1.2KB
  • dist
  • js
  • full.js
    679.5KB
  • full.js.map
    6.1MB
  • node_modules
  • element-resize-event
  • vue
  • element-resize-detector
  • echarts
  • lodash.debounce
  • LICENSE
    1KB
  • README.md
    5.5KB
  • .npminstall.done
    54B
  • package.json
    2.1KB
内容介绍
# vue-echarts-v3 [![npm](https://img.shields.io/npm/v/vue-echarts-v3.svg)](https://www.npmjs.com/package/vue-echarts-v3) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![echarts3](https://img.shields.io/badge/echarts-3.x-brightgreen.svg)](http://echarts.baidu.com/) > [Vue.js](https://vuejs.org/) `v2.x+` component wrap for [ECharts.js](http://echarts.baidu.com/) `v3.x+` ## Feature 1. Lightweight, efficient, on-demand binding events; 2. Support for importing ECharts.js charts and components on demand; 3. Support component resize event auto update view; ## Installation ``` bash $ npm install --save vue-echarts-v3 ``` ## Usage 1. Import all charts and components ``` js import Vue from 'vue'; import IEcharts from 'vue-echarts-v3/src/full.vue'; ``` 2. Import ECharts.js modules manually to reduce bundle size ``` js import Vue from 'vue'; import IEcharts from 'vue-echarts-v3/src/lite.vue'; // import 'echarts/lib/chart/line'; import 'echarts/lib/chart/bar'; // import 'echarts/lib/chart/pie'; // import 'echarts/lib/chart/scatter'; // import 'echarts/lib/chart/radar'; // import 'echarts/lib/chart/map'; // import 'echarts/lib/chart/treemap'; // import 'echarts/lib/chart/graph'; // import 'echarts/lib/chart/gauge'; // import 'echarts/lib/chart/funnel'; // import 'echarts/lib/chart/parallel'; // import 'echarts/lib/chart/sankey'; // import 'echarts/lib/chart/boxplot'; // import 'echarts/lib/chart/candlestick'; // import 'echarts/lib/chart/effectScatter'; // import 'echarts/lib/chart/lines'; // import 'echarts/lib/chart/heatmap'; // import 'echarts/lib/component/graphic'; // import 'echarts/lib/component/grid'; // import 'echarts/lib/component/legend'; // import 'echarts/lib/component/tooltip'; // import 'echarts/lib/component/polar'; // import 'echarts/lib/component/geo'; // import 'echarts/lib/component/parallel'; // import 'echarts/lib/component/singleAxis'; // import 'echarts/lib/component/brush'; import 'echarts/lib/component/title'; // import 'echarts/lib/component/dataZoom'; // import 'echarts/lib/component/visualMap'; // import 'echarts/lib/component/markPoint'; // import 'echarts/lib/component/markLine'; // import 'echarts/lib/component/markArea'; // import 'echarts/lib/component/timeline'; // import 'echarts/lib/component/toolbox'; // import 'zrender/lib/vml/vml'; ``` ## Using the component ``` vue <template> <div class="echarts"> <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts> <button @click="doRandom">Random</button> </div> </template> <script type="text/babel"> import IEcharts from 'vue-echarts-v3/src/full.vue'; 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, 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) { console.log(instance); }, onClick(event, instance, echarts) { console.log(arguments); } } }; </script> <style scoped> .echarts { width: 400px; height: 400px; } </style> ``` ## Properties * `className` Optional; `vue-echarts` by default. CSS style is `{ width: 100%; height: 100%; }` by default. * `initOpts` & `theme` Optional; Used to initialize ECharts instance. * `option` **[reactive]** Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOptions` method. * `group` **[reactive]** Optional; This property is automatically bound to the same property of the ECharts instance. * `notMerge` Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption) * `lazyUpdate` Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption) * `loading` **[reactive]** Optional; `false` by default. Modifying this property will trigger ECharts' `showLoading` or `hideLoading` method. * `loadingOpts` Optional; [Detail](https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.showLoading) * `resizable` Optional; `false` by default. See more [ECharts' Option](http://echarts.baidu.com/option.html) ## Instance Methods * `resize` * `update` * `mergeOption` * `dispatchAction` * `convertToPixel` * `convertFromPixel` * `containPixel` * `showLoading` * `hideLoading` * `getDataURL` * `getConnectedDataURL` * `clear` ## Static Methods * `connect` * `disConnect` * `dispose` * `getInstanceByDom` * `registerMap` * `getMap` * `registerTheme` Learn more [ECharts' API](http://echarts.baidu.com/api.html) ## Development ``` bash $ git clone https://github.com/xlsdg/vue-echarts-v3.git vue-echarts $ cd vue-echarts && npm i && npm run start ``` Then open `http://localhost:8080/` to see the demo. # License MIT
评论
    相关推荐
    • ECharts 地图
      ECharts 地图,几种样式的地图DEMO
    • Echarts实例
      Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例
    • echarts实例
      Echarts图表开发实例,包括折线图、饼状图、柱状图等
    • echarts图标
      本图表是echarts图标。。。。。。。。
    • ECharts Demo
      ECharts Demo,解压缩后直接看
    • echarts图表
      echarts图表示例教程
    • echarts地图
      echarts地图实现模拟迁徙,动态地图,实现模拟迁徙,实现模拟迁徙
    • echarts
      NULL 博文链接:https://lxmhope.iteye.com/blog/2228606
    • echarts1.4.1
      echarts工具包1.4.1版本、图表控件:地图、柱形图、曲线图以及实例、适应IE8的插件
    • SIM800C_MQTT.rar
      使用SIM800C模块,使用MQTT协议,连接中国移动onenet平台,能实现数据的订阅、发布、存储等