vue实现曲线图
1、打开cmd,跳转到要创建项目的文件夹
命令:cd /d 文件夹位置

2、创建项目
命令: vue init webpack 项目名


3、在vscode中打开项目文件夹,新建终端,下载ehcarts,最好下载4.9.0版本,5.0易出错。


命令: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已经在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、在服务器中运行项目,终端中输入npm run dev

拙劣的模仿。