首先,本人是菜鸟一枚,自己没事研究一下。大佬有更简单的方式或者方法错误请提出谢谢。
切入正题
使用的是mpvue-echarts插件,请前往https://ext.dcloud.net.cn/plugin?id=46下载
下载玩之后把components中的echarts和mpvue-echarts放在自己项目的components里面
接着引入
import * as echarts from '../../components/echarts/echarts.simple.min.js';
import mpvueEcharts from '../../components/mpvue-echarts/src/echarts.vue'`
页面编辑
<template>
<view class="table">
<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
</view>
</template>
<script>
import * as echarts from '../../components/echarts/echarts.simple.min.js';
import mpvueEcharts from '../../components/mpvue-echarts/src/echarts.vue'
export default {
components: {
mpvueEcharts
},
data() {
return {
echarts: echarts,
}
},
onLoad() {
},
methods: {
lineInit(canvas, width, height) {
// console.log(canvas)
let lineChart = echarts.init(canvas, null, {
width: width,
height: height,
})
canvas.setChart(lineChart)
let list = ['1', '2', '3', '4'] //模拟请求的数据
let option = {
xAxis: {
type: 'category',
data: list //更改为自己上面定义的数据
},
yAxis: {
type: 'value',
data: []
},
grid: {
left: 10,
right: 30,
bottom: 10,
top: 30,
containLabel: true
//left right bottom top 是距离边框的数值
},
series: [{
data: [],
data: [1,2,3,4], //此处为y轴数值
type: 'line',
color: ['#5eb4e2'], //折线条的颜色
}]
}
lineChart.setOption(option)
return lineChart
},
btn() {
}
}
}
</script>
<style>
.ec-canvas[data-v-fa0fa476] {
height: 600rpx;
width: 100%;
}
</style>