如何在 Vue 项目中使用百度Echarts.js
目录
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了 echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几乎可以满足我们所有的开发需要,第三:echarts 应该是国内做的最好的可视化库之一了。
废话不多说,那我们就看看如何在 Vue 的项目中使用 echarts。
第一种方法,直接引入 echarts
安装 echarts 项目依赖
npm install echarts --save //或者 npm install echarts -S
如果没有科学上网的朋友可以使用国内的淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -S
全局引入
我们安装完成之后,可以在 main.js 中全局引入 echarts
import echarts from "echarts"; Vue.prototype.$echarts = echarts;
创建图表
<div id = "app" > <div id = "main" style = "width: 600px; height: 400px;" ></div> </div > export default { name: "app", methods: { drawChart() { // 基于准备好的 dom,初始化 echarts 实例 let myChart = this.$echarts.init(document.getElementById("main")); // 指定图表的配置项和数据 let option = { title: { text: "ECharts 入门示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }, mounted() { this.drawChart(); } };
效果如下:
第二种方法,使用 Vue-ECharts 组件
安装组件
npm install vue-echarts -S
使用组件
<div id="app"></div> <style> .my-chart { width: 800px; height: 500px; } </style> <script> import ECharts from "vue-echarts/components/ECharts"; import "echarts/lib/chart/bar"; export default { name: "App", components: { "v-chart": ECharts }, data: function() { return { bar: { title: { text: "ECharts 入门示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] } ] } }; } }; </script>
最后的效果和第一种实用的方法也是一样的。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何在 Vue 项目中使用百度Echarts.js
码云笔记 » 如何在 Vue 项目中使用百度Echarts.js