步骤
一、下载echarts
2、通过定制下载
二、导入到项目中
三、使用
前提知识:需先了解 renderjs
<!-- 自定义组件 Chart -->
<template>
<view class="income-trend">
<view class="title">
<text>{{ titleMsg.title }}</text>
<text class="unit">{{ titleMsg.unit }}</text>
</view>
<view class="chart-style">
<!-- #ifdef APP-PLUS -->
<!-- -->
<view
id="echarts"
:total_data="total_data"
:change:total_data="echarts.dataChange"
style="width: 681rpx; height: 450rpx"
></view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view
id="echarts"
style="width: 681rpx; height: 450rpx"
></view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
props: ["chartData", "titleMsg"],
data() {
return {
total_data: null,
};
},
watch: {
chartData: {
handler(newVal, oldVal) {
// console.log("watch chartData", newVal);
this.total_data = newVal;
},
deep: true, // 深度监听对象内部属性的变化
immediate: true,
},
},
};
</script>
<!-- 通过renderjs 能够操作视图层的dom -->
<!-- module 需要与上面 :change:total_data="echarts.dataChange" 的对应 -->
<!-- eg:module="xxxx" :change:total_data="xxxx.dataChange" -->
<script module="echarts" lang="renderjs">
// /utils/echarts 即下载 的echarts 文件 保存路径 自行替换
import * as echarts from "@/utils/echarts";
let chartDom
export default {
// props: ["total_data"],
mounted() {
chartDom = echarts.init(document.getElementById("echarts"))
// console.log("chartDom", chartDom);
// h5 可以直接在这里直接 setOption
// 自行设置自己需要的 options 即可
// chartDom.setOption({...}) 通过this 能拿到 total_data
},
methods: {
// total_data 数据变化之后可以监听到
// app端 在这里是不能通过this去获取data,eg:this.total_data 拿不到数据(×),h5则可以
// (√)
dataChange(newVal) {
let options = {
grid: {
top: newVal.seriesData.length == 0 ? "5%" : "8%",
left: "10%",
right: "5%",
},
xAxis: {
type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: []
},
yAxis: {
type: 'value',
min: 0,
max: newVal.seriesData.length == 0 ? 10 : 'dataMax',
},
series: [
{
// data: [150, 230, 224, 218, 135, 147, 260],
data: [],
type: 'line',
smooth: true,
itemStyle : { normal: {label : {show: true}}},
}
],
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}
}
if(JSON.stringify(newVal) != '{}') {
options.xAxis.data = newVal.xAxisData
options.series[0].data = newVal.seriesData
}
chartDom.setOption(options)
}
},
};
</script>
<style lang="scss" scoped>
.income-trend {
width: 681rpx;
height: 458rpx;
background: #ffffff;
box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(229, 229, 229, 0.6);
border-radius: 28rpx;
margin: 20rpx auto;
box-sizing: border-box;
.title {
width: 100%;
height: 78rpx;
// @include font(#000, 33rpx, 400);
box-sizing: border-box;
padding: 20rpx;
.unit {
// @include font(#6b6b6b, 26rpx, 400);
margin-left: 20rpx;
}
}
.chart-style {
width: 100%;
height: 380rpx;
}
}
</style>
四、引用组件
<Chart
:chartData="chart_data"
:titleMsg="{ title: '营业趋势', unit: '单位:元' }"
></Chart>
<script>
export default {
data() {
return {
chart_data: {
// 自行设置数据
xAxisData: [],
seriesData: []
}
}
}
</script>
可以通过运行到手机模拟器、Hbuilder X 内置浏览器 查看效果
此为简单的 折线图 栗子, 相关饼图等复杂图表可以修改相应的options实现 (若有错别字 or 单词编写错误,请高抬贵手)