- <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 option;
- option = {
- // backgroundColor: '#0e2147',
- color: ['#3FFFC2'],
- grid: {
- // left: '5%',
- top: '10%',
- bottom: '20%',
- right: '5%',
- },
- 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 == 'K线性拟合' ? 'mm' : '毫米';
- relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
- }
- }
- return relVal;
- },
- },
- legend: {
- // type: 'scroll',
- data: [],
- itemWidth: 18,
- itemHeight: 12,
- textStyle: {
- color: '#00ffff',
- fontSize: 14,
- },
- },
- yAxis: [
- {
- type: 'value',
- position: 'left',
- nameTextStyle: {
- color: '#3FFFC2',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: 'rgba(135,140,147,0.8)',
- },
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- formatter: '{value}',
-
- color: '#fff',
- fontSize: 14,
- },
- },
- ],
- xAxis: [
- {
- type: 'category',
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#3FFFC2',
- },
- },
- axisLabel: {
- inside: false,
- textStyle: {
- color: '#fff', // x轴颜色
- fontWeight: 'normal',
- fontSize: '14',
- lineHeight: 22,
- },
- },
- data: props.data.XName,
- },
- ],
- series: [
- {
- symbolSize: 10,
- name: '降雨量',
- type: 'line',
- animationDuration: 8000, // 动画持续时间
- animationEasing: 'cubicInOut',
- data: props.data.data1,
- itemStyle: {
- borderWidth: 5,
- // color: '#0696f9',
- },
- },
- {
- type: 'lines',
- coordinateSystem: 'cartesian2d',
- symbolSize: 30,
- polyline: true,
-
- effect: {
- show: true,
- trailLength: 0,
- symbol: 'arrow',
- period: 25, //光点滑动速度
- symbolSize: 15,
- },
-
- lineStyle: {
- width: 1,
- opacity: 0.6,
- curveness: 0.2,
- },
- data: props.data.data,
- },
- ],
- };
- 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>