效果
代码
<template>
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
</view>
</template>
<script>
export default {
data() {
return {
option: '',
}
},
mounted() {
this.getData(); // 在组件挂载后调用获取数据的方法
},
methods: {
getData() {
uni.request({
url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',
data: {},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
//月统计
var monthinfo = res.data.month_info;
this.monthinfo = monthinfo;
//显示图表
this.echart();
},
fail(res) {
console.log("查询失败")
}
});
},
echart() {
//月统计
// 提取日期和对应的值
var dates1 = this.monthinfo.date;
var values1 = this.monthinfo.total_amount;
var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
this.option = {
//配置网格组件，用于定义图表的位置和大小
grid: {
top: '15%', // 增加top的值来创建间距
left: '2%',
right: '2%',
bottom: '2%', // 增加bottom的值来创建间距
containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
},
color: ['#5588d4'],
tooltip: {
trigger: 'item',
axisPointer: {
type: 'line'
},
formatter: function(params) {
var value = values1[params.dataIndex];
var date = dates1[params.dataIndex];
var month = months1_chinese[params.dataIndex];
var marker = params.marker; // 添加marker(小圆点)
return marker + ' ' + date + '<br/>' + month + ' : ' + value + '万元';
}
},
xAxis: {
// name: '日期',
data: months1,
axisLine: {
show: false // 隐藏纵坐标轴的横线
},
//隐藏小刻度短线
axisTick: { // x轴刻度相关配置
show: false, // 是否显示x轴刻度线
},
nameTextStyle: {
fontSize: 12 // 设置横轴名称字体大小为12
}
},
yAxis: {
name: '金额(万元)',
splitLine: {
show: false // 隐藏纵坐标轴的背景横线
},
axisLine: {
show: false // 隐藏纵坐标轴的竖线
},
//隐藏小刻度短线
axisTick: { // x轴刻度相关配置
show: false, // 是否显示x轴刻度线
},
axisLabel: {
fontSize: 12 // 设置横轴标签字体大小为12
},
nameTextStyle: {
fontSize: 12 // 设置横轴名称字体大小为12
}
},
series: [{
barWidth: '6',
name: '销量',
type: 'bar',
data: values1,
itemStyle: {
show: true,
position: 'top',
textStyle: {
// color: '#515dc3',
fontSize: 12
}
}
}]
}
}
}
}
</script>
<!-- 指定脚本类型模块为echarts,语言为renderjs -->
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
// 首先判断window.echarts是否存在，如果存在则调用initEcharts方法进行初始化。
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 如果不存在，则动态创建一个<script>标签，并设置其src属性为static/js/echarts.js，然后在加载完成后调用initEcharts方法。
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'static/js/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
//echarts.init函数创建一个新的ECharts实例，并将其挂载到具有id为echarts的DOM元素上。
myChart = echarts.init(document.getElementById('echarts'))
},
//updateEcharts方法用于更新图表数据。当监听到组件数据或属性发生变化时，会调用这个方法。
// 在方法中，首先判断myChart实例是否存在，如果存在则调用setOption方法，将新的配置选项传递给图表实例。
updateEcharts(newValue, oldValue, ownerInstance, instance) {
if (myChart != undefined) {
myChart.setOption(newValue)
}
},
}
}
</script>
<style>
.echarts {
width: 100%;
height: 300px;
}
</style>解析
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
-
@click="echarts.onClick"：在点击事件发生时，将调用echarts.onClick方法进行处理。@click是Vue中绑定点击事件的方式，相当于v-on:click。 -
:prop="option"：将option作为prop属性的值进行绑定。这里的prop可以是组件的自定义属性，被父组件传递给子组件作为数据的一种方式。 -
:change:prop="echarts.updateEcharts"：使用了Vue的修饰符语法，在change:prop事件发生时，调用echarts.updateEcharts方法进行处理。 -
id="echarts"：给该元素指定了唯一的id属性值为echarts。id属性通常用于在JavaScript中获取元素或通过CSS选择器匹配元素。 -
class="echarts"：给该元素指定了一个CSS类名为echarts，用于样式设计或选择器匹配。
<script module="echarts" lang="renderjs">
- 指定了这个脚本模块的类型为
echarts，并且语言为renderjs。
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'static/js/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
- 首先判断
window.echarts是否存在，如果存在则调用initEcharts方法进行初始化。 -
如果不存在，则动态创建一个
<script>标签，并设置其src属性为static/js/echarts.js，然后在加载完成后调用initEcharts方法。 -
script.onload指定了onload事件的回调函数为this.initEcharts.bind(this)。当ECharts库的脚本加载完成后，触发onload事件，即可执行该回调函数。 -
this.initEcharts.bind(this)使用bind方法将当前组件实例绑定到initEcharts方法内部的this关键字上。这样，在initEcharts方法内部，this关键字将指向当前组件实例，可以访问组件的属性和方法。 -
document.head.appendChild(script)将动态创建的<script>元素添加到文档头部（head元素）中。通过这样的方式，浏览器会开始加载并执行该脚本。
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
},
- echarts.init函数创建一个新的ECharts实例，并将其挂载到具有id为echarts的DOM元素上
updateEcharts(newValue, oldValue, ownerInstance, instance) {
if (myChart != undefined) {
myChart.setOption(newValue)
}
},
- updateEcharts方法用于更新图表数据。当监听到组件数据或属性发生变化时，会调用这个方法。
- 在方法中，首先判断myChart实例是否存在，如果存在则调用setOption方法，将新的配置选项传递给图表实例。
