vue實(shí)現(xiàn)曲線圖
1、打開cmd，跳轉(zhuǎn)到要創(chuàng)建項(xiàng)目的文件夾
?命令：cd /d 文件夾位置
2、創(chuàng)建項(xiàng)目
命令： vue init webpack 項(xiàng)目名
3、在vscode中打開項(xiàng)目文件夾，新建終端，下載ehcarts，最好下載4.9.0版本，5.0易出錯(cuò)。
?命令：npm install echarts@4.9.0
5、在src文件夾中新建文件myCharts.js(名稱可以隨意取)
代碼：
import echarts from 'echarts'
const install = function (Vue) {
? Object.defineProperties(Vue.prototype, {
? ? $chart: {
? ? ? get () {
? ? ? ? return {
? ? ? ? ? // 畫一條簡單的線
? ? ? ? ? line1: function (id) {
? ? ? ? ? ? this.chart = echarts.init(document.getElementById(id))
? ? ? ? ? ? this.chart.clear()
? ? ? ? ? ? const optionData = {
? ? ? ? ? ? ? xAxis: {// x軸
? ? ? ? ? ? ? ? type: 'category',
? ? ? ? ? ? ? ? data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
? ? ? ? ? ? ? },
? ? ? ? ? ? ? yAxis: {// y軸
? ? ? ? ? ? ? ? type: 'value'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? data: [820, 932, 901, 934, 1290, 1330, 1320],
? ? ? ? ? ? ? ? type: 'line',
? ? ? ? ? ? ? ? smooth: true
? ? ? ? ? ? ? }]
? ? ? ? ? ? }
? ? ? ? ? ? this.chart.setOption(optionData)
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? })
}
export default {
? install
}
6、在main.js中引入myCharts.js,echarts已經(jīng)在myCharts.js中引入過了
代碼：
import myCharts from 'F:/myvue/HelloWorld/src/myCharts.js'（myCharts地址，最好用絕對地址）
Vue.use(myCharts)
6、修改components文件夾中的HelloWorld.vue
代碼：
<template>
? <div class="hello">
? ? <div id="chart1"></div>
? </div>
</template>
<script>
export default {
? name: 'HelloWorld',
? data () {
? ? return {
? ? }
? },
? mounted() {
? ? this.$chart.line1('chart1');
? }
}
</script>
<style scoped>
? #chart1 {
? ? width: 300px;
? ? height: 300px;
? }
</style>
7、刪除APP.vue中的<img src="./assets/logo.png">
8、在服務(wù)器中運(yùn)行項(xiàng)目，終端中輸入npm run dev
拙劣的模仿。
