- <template>
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script>
- import * as echarts from 'echarts';
- import { guid } from '@/utils/util';
-
- import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';
-
- export default {
- name: 'shishijiangyu',
- props: {
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //数据
- data: {
- type: Object,
- default: {},
- },
- },
- setup(props) {
- const state = reactive({
- id: guid(),
- chart: null,
- xData: [],
- yData1: [],
- yData2: [],
- });
-
- const resizeTheChart = () => {
- if (state.chart) {
- state.chart.resize();
- }
- };
- const init = () => {
- state.xData = props.data.listName;
- state.yData1 = props.data.diduan;
- state.yData2 = props.data.zhengzhi;
-
- let chartDom = echarts.init(document.getElementById(state.id));
- var option;
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- backgroundColor: '#000000',
- borderColor: '#00D2FF',
- textStyle: { fontSize: 14, fontWeight: 500, color: '#00D2FF' },
- },
- grid: {
- top: '22%',
- left: '8%',
- right: '8%',
- bottom: '5%',
- containLabel: true,
- },
- legend: {
- show: true,
- textStyle: {
- color: '#E8F7FF',
- },
- itemHeight: 3,
- itemWidth: 10,
- icon: 'rect',
- },
- xAxis: {
- type: 'category',
- data: state.xData,
-
- splitLine: {
- show: false,
- },
- axisLabel: {
- color: '#ffffffFF',
- fontSize: 11,
- },
- },
- yAxis: [
- {
- type: 'value',
- name: '堤段长度(km)',
- alignTicks: true,
- min: 0,
- nameTextStyle: {
- color: '#16d0dcFF',
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dotted',
- color: 'rgba(14, 107, 165, 1)',
- },
- },
- axisLabel: {
- color: '#1cf5fcFF',
- },
- },
- {
- type: 'value',
- name: '整治长度(km)',
- alignTicks: true,
- min: 0,
- position: 'right',
- nameTextStyle: {
- color: '#52d183FF',
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dotted',
- color: 'rgba(14, 107, 165, 1)',
- },
- },
- axisLabel: {
- color: 'rgb(44 252 100 / 98%)',
- },
- },
- ],
- series: [
- {
- name: '堤段长度',
- // data: props.data.rainlist,
- data: state.yData1,
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- borderRadius: [2, 2, 0, 0],
- color: '#1cf5fcFF',
- // color: new proxy.echarts.graphic.LinearGradient(
- // 0,
- // 1,
- // 0,
- // 0, // 0,0,1,0表示从左向右 0,0,0,1表示从右向左
- // [
- // { offset: 1, color: '#1cf5fcFF' },
- // { offset: 0, color: 'rgba(11, 167, 124, 0.3)' },
- // ]
- // ),
- },
- },
- },
- {
- name: '整治长度',
- // data: props.data.rainlist,
- data: state.yData2,
- yAxisIndex: 1,
- type: 'bar',
- barWidth: 10,
- itemStyle: {
- normal: {
- borderRadius: [2, 2, 0, 0],
- color: '#5fe889FF',
- // color: new proxy.echarts.graphic.LinearGradient(
- // 0,
- // 1,
- // 0,
- // 0, // 0,0,1,0表示从左向右 0,0,0,1表示从右向左
- // [
- // { offset: 1, color: 'rgb(44 252 100 / 98%)' },
- // { offset: 0, color: 'rgb(44 252 100 / 21%)' },
- // ]
- // ),
- },
- },
- },
- ],
- };
-
- option && chartDom.setOption(option, true);
- state.chart = chartDom;
- };
- watch(
- () => props.refresh,
- (newVal, oldVal) => {
- console.log(props, 'props');
- //先销毁实例
- // myChart.value && myChart.value.dispose();
- init();
- }
- );
-
- onMounted(() => {
- nextTick(() => {
- init();
- });
- window.addEventListener('resize', resizeTheChart);
- });
- return {
- ...toRefs(state),
- resizeTheChart,
- init,
- };
- },
- };
- </script>
-
- <style></style>