本文介绍了在uniapp中如何导入并使用mpvue-echarts组件来创建图表。详细展示了配置数据，包括legend、xAxis、yAxis、dataZoom和series等属性的设置，以及如何初始化和设置图表选项的方法。
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
}
}
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
