目錄

?

過程

代碼與實例

---

?

過程

首先下載echarts
?

cnpm install echarts -S //或者是 cnpm install echarts --save

下載好后：

在main.js中導入：

import echarts from 'echarts' Vue.prototype.$axios=Axios

在vue中實例下：

<template><div><div><div id="main" style="width: 500px; height:500px"></div></div></div> </template>

script如下：

<script> export default {mounted(){this.drawLine();},methods: {handleSubmit(){.........},//開始畫圖了drawLine(){// 基于準備好的dom，初始化echarts實例//var myChart = this.$echarts.init(document.getElementById('main'));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);}} } </script>

程序運行截圖如下：

?

?

代碼與實例

結構如下：

源碼如下：

main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import Axios from 'axios' import echarts from 'echarts' import TestEChart from './TestEChart'Vue.config.productionTip = false Vue.prototype.$axios=Axios Vue.prototype.$echarts = echarts/* eslint-disable no-new */ new Vue({el: '#app',components: { TestEChart },template: '<TestEChart/>', })

TestEChart.vue

<template><div><div><div id="main" style="width: 500px; height:500px"></div></div><div><button @click="handleSubmit">獲取</button></div></div> </template><script> export default {mounted(){this.drawLine();},methods: {handleSubmit(){this.$axios({type: 'get',url: '/gra/list'}).then(res => {console.log(res)}).catch(err=>{alert(err)})},//開始畫圖了drawLine(){// 基于準備好的dom，初始化echarts實例//var myChart = this.$echarts.init(document.getElementById('main'));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);}} } </script><style></style>

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端笔记-vue cli使用echarts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。