- <template>
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script>
- import * as echarts from 'echarts';
- import { guid } from '@/utils/ruoyi';
- import { reactive, toRefs, onMounted, watch } from 'vue';
- export default {
- name: 'line-chart',
- props: {
- data: Object,
- refresh: Number,
- },
- setup(props) {
- const allData = reactive({
- series: [],
- legend: [],
- id: guid(),
- chart: null,
- });
- const resizeTheChart = () => {
- if (allData.chart) {
- allData.chart.resize();
- }
- };
-
- const init = () => {
- let chartDom = echarts.init(document.getElementById(allData.id));
-
- var shadowYData = [100, 100];
- var color = 'rgba(31,227,249,1)';
- var shadowColor = '#0b5767';
- var barWidth = 12;
-
- var MaXmm = Math.max.apply(null, [...props.data.yAxis, ...props.data.yAxis2]);
-
- var option;
- option = {
- // title: {
- // show: true, //显示策略,默认值true,可选为:true(显示) | false(隐藏)
- // text: '主标题主标题主标题主标题主标题主标题主标题', //主标题文本,'\n'指定换行
- // },
- color: ['#6a93f5', '#3fffc2'],
-
- tooltip: {
- trigger: 'axis',
- formatter: params => {
- // console.log(params);
- var relVal = '' + params[0].name;
- for (var i = 0, l = params.length; i < l; i++) {
- if (params[i].seriesName) {
- let unit = params[i].seriesName == '小时雨量(mm)' ? 'mm' : 'mm';
- relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value + unit;
- }
- }
- return relVal;
- },
- },
- grid: {
- top: 50,
- bottom: 30,
- },
- legend: {
- show: false,
- x: 'right', //居右显示
- align: 'left', //图例控制在左边
- icon: 'circle',
- itemWidth: 15,
- itemHeight: 15,
- textStyle: {
- color: 'auto',
- rich: {
- another: {
- fontSize: 28,
- },
- },
- fontSize: 14,
- },
- },
- xAxis: [
- {
- type: 'category',
- axisLine: {
- show: false,
- lineStyle: {
- width: 2,
- color: '#58b2ed',
- },
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: '#58b2ed',
- fontSize: 14,
- fontFamily: 'AlibabaPuHuiTi',
- },
- data: props.data.xAxis,
- },
- ],
- yAxis: [
- {
- name: '小时雨量(mm)',
- type: 'value',
- axisLabel: {
- color: '#6a93f5',
- show: true,
- },
- nameTextStyle: {
- color: '#6a93f5',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#6a93f5',
- },
- },
- alignTicks: true,
- min: 0,
- max: MaXmm,
- interval: Math.ceil(MaXmm / 5),
- },
- {
- name: '累计雨量(mm)',
- type: 'value',
- nameTextStyle: {
- color: '#3fffc2',
- },
- min: 0,
- max: MaXmm,
- interval: Math.ceil(MaXmm / 5),
- axisLabel: {
- show: true,
- color: '#3fffc2',
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#3fffc2',
- type: 'dashed',
- },
- },
- alignTicks: true,
- },
- ],
- dataZoom: [
- {
- // show: true,
- show: false,
- height: 4,
- bottom: 18,
- start: 0,
- end: 100,
- handleSize: '100%',
- fillerColor: '#94FA41',
- borderColor: 'transparent',
- backgroundColor: 'rgba(148, 250, 65, 0.2)',
- handleStyle: {
- color: '#94FA41',
- },
- moveHandleSize: 0,
- textStyle: {
- color: '#fff',
- },
- },
- {
- type: 'inside',
- show: true,
- height: 15,
- start: 1,
- end: 35,
- },
- ],
- series: [
- {
- name: '小时雨量(mm)',
- type: 'bar',
- barWidth: barWidth,
- barGap: '10%', // Make series be overlap
- barCateGoryGap: '10%',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
- {
- offset: 0,
- color: 'rgba(106, 147, 245, 1)',
- },
- {
- offset: 1,
- color: 'rgba(106, 147, 245, 1)',
- },
- ]),
- },
- },
- data: props.data.yAxis,
- },
- {
- smooth: true, //变为曲线 默认false折线
- name: '累计雨量(mm)',
- type: 'line',
- data: props.data.yAxis2,
- yAxisIndex: 1,
- color: '#3fffc2',
- },
- ],
- };
- option && chartDom.setOption(option, true);
- allData.chart = chartDom;
- };
- watch(
- () => props.refresh,
- () => {
- if (allData.chartDom) {
- allData.chartDom.dispose();
- allData.chartDom = null;
- }
- setTimeout(() => {
- init();
- }, 0);
- }
- );
- onMounted(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- return {
- ...toRefs(allData),
- resizeTheChart,
- init,
- };
- },
- };
- </script>