如何使用echart"/>
uniapp 中如何使用echart
import mpvueEchartsfrom '@/components/mpvue-echarts/src/echarts.vue';
exportdefault{
data() {return{
updateStatus:false,
line: {
legend: {
data: ['邮件营销']
},
xAxis: {
type:'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type:'value',
data: []
},
dataZoom: [{
type:'slider',
start:30,
end:100,
zoomLock:false,
}],
grid: {
left:40,
right:40,
bottom:20,
top:40,
containLabel:true},
series: [{
data: [],
data: [820, 932, 901, 934, 1290, 1330, 1320],
type:'line',
color: ['#5eb4e2'], //折线条的颜色
}]
}
}
},
methods: {
lineInit(e) {
let {
width,
height
}=e;
let canvas= this.$refs.lineChart.canvas
echarts.setCanvasCreator(()=>canvas);
let lineChart= echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(lineChart)
lineChart.setOption(this.line)this.$refs.lineChart.setChart(lineChart)
},
},
components: {
mpvueEcharts
}
}
更多推荐
uniapp 中如何使用echart
发布评论