vue項目中如何使用echart插件
來源 |?https://www.html.cn/web/vue-js/20680.html
獲取ECharts
從 Apache ECharts (incubating) 官網(wǎng)下載界面 獲取官方源碼包后構(gòu)建。 在 ECharts 的 GitHub 獲取。 通過 npm 獲取 echarts，npm install echarts --save，詳見“在 webpack 中使用echarts 通過 jsDelivr 等 CDN 引入
引入ECharts
import echarts from "echarts";繪制一個簡單的圖表
<template><div id="app"><div id="main" style="width:600;height:400px">div>div>template>
然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。
<script>import echarts from "echarts";export default {name: "App",data() {return {option: {title: {text: "ECharts 入門示例"},tooltip: {},legend: {data: ["銷量"]},xAxis: {data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]},yAxis: {},series: [{name: "銷量",type: "bar",data: [5, 20, 36, 10, 10, 20]}]}};},methods: {drawPid(id) {// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById("main"));// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(this.option);}},mounted() {this.$nextTick(function() {this.drawPid("main");});}};script>
這樣你的第一個圖表就誕生了！
本文完~
評論
圖片
表情