- <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, onUnmounted, normalizeStyle } from 'vue';
- export default {
- name: 'line-chart',
- props: {
- echartData: Object,
- refresh: Number,
- },
- setup(props) {
- const allData = reactive({
- series: [],
- legend: [],
- id: guid(),
- chart: null,
- timer: null,
- });
- const resizeTheChart = () => {
- if (allData.chart) {
- allData.chart.resize();
- }
- };
-
- const init = () => {
- let chartDom = echarts.init(document.getElementById(allData.id));
- let option = {
- color: [
- '#63caff',
- '#49beff',
- '#03387a',
- '#03387a',
- '#03387a',
- '#6c93ee',
- '#a9abff',
- '#f7a23f',
- '#27bae7',
- '#ff6d9d',
- '#cb79ff',
- '#f95b5a',
- '#ccaf27',
- '#38b99c',
- '#93d0ff',
- '#bd74e0',
- '#fd77da',
- '#dea700',
- ],
- grid: {
- containLabel: true,
- left: 10,
- right: 20,
- bottom: 10,
- top: 30,
- },
- xAxis: {
- axisLabel: {
- color: '#fff',
- fontSize: 12,
- interval: 0,
- rotate: 30,
- },
- axisTick: {
- lineStyle: {
- color: '#384267',
- },
- show: true,
- },
- splitLine: {
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: '#005CBA',
- width: 1,
- type: 'dashed',
- },
- show: true,
- },
- data: props.echartData.xAxis,
- type: 'category',
- },
- yAxis: {
- max: props.echartData.Maximum,
- axisLabel: {
- color: '#c0c3cd',
- fontSize: 12,
- },
- axisTick: {
- lineStyle: {
- color: '#005CBA',
- width: 1,
- },
- show: true,
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#005CBA',
- type: 'dashed',
- },
- },
- axisLine: {
- lineStyle: {
- color: '#005CBA',
- width: 1,
- type: 'dashed',
- },
- show: true,
- },
- name: props.echartData.yName,
- nameTextStyle: {
- color: '#fff',
- },
- },
- dataZoom: [
- // {
- // //默认控制x轴
- // type: 'slider', //图标下方的伸缩条
- // // show: true, //是否显示
- // // realtime: true,
- // start: 0, //伸缩条开始位置
- // end: 60, //伸缩条结束位置
- // },
- // {
- // type: 'inside',
- // // xAxisIndex: [0],
- // start: 0,
- // end: 60,
- // },
- ],
- series: [
- {
- data: props.echartData.seriesData,
- type: 'bar',
- barMaxWidth: 'auto',
- barWidth: 20,
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: 'linear',
- global: false,
- colorStops: [
- {
- offset: 0,
- color: '#0b9eff',
- },
- {
- offset: 1,
- color: '#63caff',
- },
- ],
- },
- },
- label: {
- show: true,
- position: 'top',
- distance: 10,
- color: '#fff',
- },
- },
- {
- data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- type: 'pictorialBar',
- barMaxWidth: '20',
- symbol: 'diamond',
- symbolOffset: [0, '50%'],
- symbolSize: [20, 15],
- },
- {
- data: props.echartData.seriesData,
- type: 'pictorialBar',
- barMaxWidth: '20',
- symbolPosition: 'end',
- symbol: 'diamond',
- symbolOffset: [0, '-50%'],
- symbolSize: [20, 12],
- zlevel: 2,
- },
- {
- data: props.echartData.num,
- type: 'bar',
- barMaxWidth: 'auto',
- barWidth: 20,
- barGap: '-100%',
- zlevel: -1,
- color: '#3471e399',
- },
- {
- data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- type: 'pictorialBar',
- barMaxWidth: '20',
- symbol: 'diamond',
- symbolOffset: [0, '50%'],
- symbolSize: [20, 15],
- zlevel: -2,
- },
- {
- data: props.echartData.num,
- type: 'pictorialBar',
- barMaxWidth: '20',
- symbolPosition: 'end',
- symbol: 'diamond',
- symbolOffset: [0, '-50%'],
- symbolSize: [20, 12],
- zlevel: -1,
- color: '#3471e399',
- },
- ],
- tooltip: {
- trigger: 'axis',
- backgroundColor: '#004284',
- borderColor: '#0B9BFF',
- textStyle: {
- // 字体颜色
- color: '#FFFFFF',
- // 字体大小
- fontSize: 14,
- },
- },
- formatter: function (params) {
- return params[0].name + ' : ' + params[0].value + '条';
- },
- };
- option && chartDom.setOption(option, true);
- allData.chart = chartDom;
- };
- watch(
- () => props.refresh,
- () => {
- if (allData.chart) {
- allData.chart = null;
- }
- setTimeout(() => {
- init();
- }, 0);
- }
- );
-
- onMounted(() => {
- // console.log(props, 'props.refresh');
- setTimeout(() => {
- init();
- }, 0);
- window.addEventListener('resize', resizeTheChart);
- });
- return {
- ...toRefs(allData),
- resizeTheChart,
- init,
- };
- },
- };
- </script>