vue图表插件echarts简单使用办法

一、了解Echarts

            ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

二、下载插件

cnpm install echarts --save  &  npm install echarts --save

三、不多说直接来干的。

       下载完成后,打开我们的vue项目中的main.js中引入插件

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

       在main.js中全局引入后,在组件中添加一个dom节点

<div id="myChart" :style="{width: '1000px', height: '500px'}"></div>

回看Echarts官网


点击实例的官方实例


选择需要的列表类型,点进去。。。


ok,拿到了。 左边的代码直接复制到刚才创建节点的文件内,定义一个方法,


最后通过 myChart.setOption(var的那个名称)方法传到实例中就欧克了!

仅供参考,其中的属性全是语义化命名的。

得到参数后,把对应的属性复制 就ok了。。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.背景介绍 Echarts是什么 ECharts来自百度EFE数据可视化团队①,是一个纯 Javascript ...
    ithinker5阅读 749评论 0 2
  • 1- 安装 echarts 依赖 npm install echarts -S 2- 创建图表全局引入 (1),在...
    致青春永恒阅读 752评论 0 0
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,178评论 0 1
  • 秋日午后 图书馆大楼 阶梯角 漆色清新 阳光穿透窗格 散淡照 仿佛载了半船绿 未问归期 而我忽焉就立在了甲板上 有...
    唐小桔阅读 957评论 10 28
  • 那一年的盛夏晚晴天, 荷花开,月未圆; 我用生命的第一次啼哭,与世界道声晚安; 而你也不甘落后,勇敢而霸气地宣誓主...
    青色花蕾阅读 484评论 0 5