- <template>
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from '@/utils/ruoyi';
- const { proxy } = getCurrentInstance();
- const id = guid();
- const myChart = shallowRef('');
-
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //标题
- title: {
- type: String,
- default: '',
- },
- //数据
- echartData: {
- type: Object,
- default: {},
- },
- });
- watch(
- () => props.refresh,
- value => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- intChart();
- }
- );
-
- //自适应
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- function intChart() {
- myChart.value = proxy.echarts.init(document.getElementById(id));
- // 绘制图表
- myChart.value.setOption({
- tooltip: {
- trigger: 'axis',
- confine: true, //是否将 tooltip 框限制在图表的区域内
- },
- title: {
- left: 'left',
- text: '',
- top: 10,
- bottom: 10,
- left: 10,
- textStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: [
- {
- left: 60,
- right: 50,
- height: '35%',
- },
- {
- left: 60,
- right: 50,
- top: '55%',
- height: '35%',
- },
- ],
- toolbox: {
- feature: {
- // dataZoom: {
- // yAxisIndex: "none",
- // },
- // restore: {},
- // saveAsImage: {},
- },
- },
- axisPointer: {
- link: [
- {
- xAxisIndex: 'all',
- },
- ],
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- axisLine: { onZero: true },
- data: props.echartData.xAxisData,
- show: false,
- },
- {
- gridIndex: 1,
- type: 'category',
- boundaryGap: false,
- axisLine: { onZero: true },
- data: props.echartData.xAxisData,
- position: 'bottom',
- },
- ],
- yAxis: [
- {
- name: props.echartData.yAxisName1,
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- fontWeight: 'bold',
- },
- },
- {
- gridIndex: 1,
- name: props.echartData.yAxisName2,
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#545E75', //字体颜色
- fontSize: 16, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- fontWeight: 'bold',
- },
- },
- ],
- dataZoom: [
- {
- show: true,
- realtime: true,
- start: 30,
- end: 70,
- xAxisIndex: [0, 1],
- },
- {
- type: 'inside',
- realtime: true,
- start: 30,
- end: 70,
- xAxisIndex: [0, 1],
- },
- ],
- series: [
- {
- name: '修复前:' + props.echartData.seriesName,
- type: 'line',
- symbolSize: 8,
- data: props.echartData.seriesData1,
- itemStyle: {
- color: 'rgb(255, 70, 131)',
- },
- areaStyle: {
- color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgb(255, 158, 68)',
- },
- {
- offset: 1,
- color: 'rgb(255, 70, 131)',
- },
- ]),
- },
- },
- {
- name: '修复后:' + props.echartData.seriesName,
- type: 'line',
- xAxisIndex: 1,
- yAxisIndex: 1,
- symbolSize: 8,
- data: props.echartData.seriesData2,
- itemStyle: {
- color: 'rgb(4, 192, 144)',
- },
- areaStyle: {
- color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgb(4, 192, 144)',
- },
- {
- offset: 1,
- color: 'rgb(4, 205, 144)',
- },
- ]),
- },
- },
- ],
- });
- }
- onMounted(() => {
- intChart();
- window.addEventListener('resize', resizeTheChart);
- });
- </script>