当前位置：首页 > news >正文

封装一个echarts的组件

news 2025/8/12 0:47:56

父组件页面

<yyjlchartv-if="showyyjl"chartId="yyjllLine":sourceData="sourceDatayyjl":options="optionsyyjl"></yyjlchart>

components: {LineEcharts,yyjlchart: () => import("../yyjlchart"),},data() {return {showyyjl: false,optionsyyjl: {grid: {left: "3%",right: "3%",bottom: "10%",top: "1%",},},
},methods: {async yyjlmap() {this.showyyjl = false;xxx调接口
数据返回后this.sourceDatayyjl.xdata = res.data.xData;this.sourceDatayyjl.ydata = res.data.medicateNames.reverse();this.sourceDatayyjl.result[0].data = res.data.yData.reverse();this.showyyjl = true;}

猪脚登场

<template><div :id="chartId" class="box"></div>
</template>
<script>
export default {props: {// 品种下拉项chartId: {type: String,default: "",},// 数据源sourceData: {type: Object,default: () => {return {ydata: [],xdata: [],result: [],};},},// 特殊配置项options: {type: Object,default: () => {},},// 图表颜色colorList: {type: Array,default: () => [],},// 是否显示tooltipshowTooltip: {type: Boolean,default: true,},// 是否显示X轴和Y轴showXorY: {type: Boolean,default: true,},xyLineColor: {type: Array,default: () => ["#E5E6E8", "#86909C"],},},data() {return {chartInstance: null,};},mounted() {this.initChart();},methods: {initChart(data) {this.chartInstance = this.$echarts.init(document.getElementById(this.chartId));let that = this;var hours = this.sourceData.ydatavar days = this.sourceData.xdatavar data = []var data1 = []let option = {// 放你的option };this.chartInstance.setOption(option);window.addEventListener("resize", () => {this.chartInstance.resize();});const chartObserver = new ResizeObserver(() => {this.chartInstance.resize();});// 监听当前图表容器大小变化的时候resizechartObserver.observe(document.getElementById(this.chartId));},fontSize(res) {let clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;// 此处的1920 为设计稿的宽度let fontSize = clientWidth / 1920;return res * fontSize;},},
};
</script><style lang="scss" scoped>
.box {width: 100%;height: 100%;
}
</style>

option = {grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['10-11', '10-12', '10-13', '10-14', '10-15', '10-16', '10-17', '10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24', '10-25', '10-26'],boundaryGap: true  // 让点之间有间隙},yAxis: {type: 'category',data: ['三维散', '复合多维', '硅烷', '硅烷1', '硅烷2'],},visualMap: {orient: 'horizontal',left: 'center',bottom: '0%',type: "piecewise",textStyle: {color: '#86909C' // 设置文字颜色},itemWidth: 25,itemHeight: 15,symbol: "square",inRange: {symbol: 'rect', // 设置图例为方形},show: false, // 显示 visualMapmin: 1,max: 50,// backgroundColor: function(params) {//     console.log(params);//       // 根据 y 轴类别来动态设置颜色//       if (params.value[1] === '三维散') return '#9b59b6';  // 紫色//       if (params.value[1] === '复合多维') return '#e67e22'; // 橙色//       if (params.value[1] === '硅烷') return '#1abc9c'; // 绿色//       return '#1abc9c';//     }},series: [{name: '热力图',type: 'heatmap',data: [// 数据格式 [x, y, value][0, 0, 40], [1, 0, 70], [2, 0, 50], [3, 0, 30], [4, 0, 0], [5, 0, 80], [6, 0, 60], [7, 0, 40], [8, 0, 50], [9, 0, 70], [10, 0, 60], [11, 0, 80], [12, 0, 50], [13, 0, 70], [14, 0, 40], [15, 0, 60],[0, 1, 60], [1, 1, 40], [2, 1, 90], [3, 1, 80], [4, 1, 60], [5, 1, 70], [6, 1, 50], [7, 1, 40], [8, 1, 80], [9, 1, 50], [10, 1, 60], [11, 1, 40], [12, 1, 60], [13, 1, 90], [14, 1, 70], [15, 1, 80],[0, 2, 30], [1, 2, 50], [2, 2, 60], [3, 2, 40], [4, 2, 70], [5, 2, 60], [6, 2, 80], [7, 2, 50], [8, 2, 40], [9, 2, 90], [10, 2, 70], [11, 2, 50], [12, 2, 60], [13, 2, 80], [14, 2, 50], [15, 2, 30]],label: {show: true,color: '#fff'},// emphasis: {//   itemStyle: {//     shadowBlur: 10,//     backgroundColor:'#000',//     shadowColor: function(params) {//       // 根据 y 轴类别来动态设置颜色//       if (params.value[1] === '三维散') return '#9b59b6';  // 紫色//       if (params.value[1] === '复合多维') return '#e67e22'; // 橙色//       if (params.value[1] === '硅烷') return '#1abc9c'; // 绿色//       return '#1abc9c';//     }//   }// },itemStyle: {normal: {borderColor: "#ffffff",borderWidth: "5",color: function(params) {var colorList = ["#3aa0ff", "#f44336", "#ffc107"];console.log(params);params.value[1]==0if (params.value[1] === 0) return '#9b59b6';  // 紫色if (params.value[1] === 1) return '#e67e22'; // 橙色if (params.value[1] === 2) return '#1abc9c'; // 绿色}}},}]
};