|
@@ -1,199 +0,0 @@
|
|
|
-<script setup>
|
|
|
-import util from "@tools/util";
|
|
|
-import chartTheme from './barChart.json'
|
|
|
-import { ref, toRaw, computed, onMounted, watch, nextTick } from 'vue';
|
|
|
-import {useStore} from 'vuex'
|
|
|
-import * as echarts from 'echarts'
|
|
|
-const chartId = 'chart-' + util.newGUID(); //chartId
|
|
|
-const chartIns = ref(null) //chart 实例
|
|
|
-const emits = defineEmits(['getSelected'])
|
|
|
-const props = defineProps({
|
|
|
- xAxis: {
|
|
|
- type: Object,
|
|
|
- required: true,
|
|
|
- default: () => ({})
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: Array,
|
|
|
- required: false
|
|
|
- },
|
|
|
- series: {
|
|
|
- type: Array,
|
|
|
- required: true
|
|
|
- },
|
|
|
- dataset: {
|
|
|
- type: Array,
|
|
|
- required: false,
|
|
|
- default: () => ([])
|
|
|
- },
|
|
|
- height: {
|
|
|
- type: String,
|
|
|
- required: false,
|
|
|
- default: '500px'
|
|
|
- },
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- required: false,
|
|
|
- default: '500px'
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- required: false
|
|
|
- },
|
|
|
- subtext: {
|
|
|
- type: String,
|
|
|
- required: false
|
|
|
- },
|
|
|
- brush: {
|
|
|
- type: Boolean,
|
|
|
- required: false,
|
|
|
- default: false
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-/**定义option */
|
|
|
-const option = computed({
|
|
|
- get() {
|
|
|
- return {
|
|
|
- color:[
|
|
|
- "rgb(54,90,176)",
|
|
|
- "rgb(54,90,176)",
|
|
|
- "#626c91",
|
|
|
- "#a0a7e6",
|
|
|
- "#c4ebad",
|
|
|
- "#96dee8"
|
|
|
- ],
|
|
|
- title: {
|
|
|
- text: props.title || '',
|
|
|
- subtext: props.subtext || '',
|
|
|
- top: -6,
|
|
|
- right: 360,
|
|
|
- },
|
|
|
- xAxis: props.xAxis || {},
|
|
|
- yAxis: props.yAxis || {},
|
|
|
- brush: {
|
|
|
- seriesIndex: [1],
|
|
|
- yAxisIndex: 0,
|
|
|
- transformable: true,
|
|
|
- throttleType: "debounce",
|
|
|
- throttleDelay: 1000,
|
|
|
- removeOnClick: true,
|
|
|
- brushType: props.brush? "polygon" : false,
|
|
|
- brushMode: "multiple",
|
|
|
- brushStyle: {
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: "#ff2424",
|
|
|
- },
|
|
|
- },
|
|
|
- toolbox:{
|
|
|
- show: props.brush,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- confine: true,
|
|
|
- trigger: "axis",
|
|
|
- },
|
|
|
- dataset: props.dataset || [],
|
|
|
- series: props.series || [],
|
|
|
- legend: {
|
|
|
- right: "120",
|
|
|
- top: "5",
|
|
|
- itemWidth: 6,
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 80,
|
|
|
- left: 40,
|
|
|
- right: 40,
|
|
|
- bottom: 40,
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: "inside", //图表下方的伸缩条
|
|
|
- show: false, //是否显示
|
|
|
- realtime: true, //拖动时,是否实时更新系列的视图
|
|
|
- start: 0, //伸缩条开始位置(1-100),可以随时更改
|
|
|
- end: 100, //伸缩条结束位置(1-100),可以随时更改
|
|
|
- },
|
|
|
- {
|
|
|
- type: "slider", //图表下方的伸缩条
|
|
|
- show: false, //是否显示
|
|
|
- realtime: true, //拖动时,是否实时更新系列的视图
|
|
|
- start: 0, //伸缩条开始位置(1-100),可以随时更改
|
|
|
- end: 100, //伸缩条结束位置(1-100),可以随时更改
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- },
|
|
|
- set(val) { }
|
|
|
-})
|
|
|
-watch(() => option, (newVal, oldVal) => {
|
|
|
- if (chartIns.value) {
|
|
|
- const echartIns = toRaw(chartIns.value)
|
|
|
- echartIns.setOption(toRaw(newVal.value))
|
|
|
- }
|
|
|
-}, { deep: true })
|
|
|
-
|
|
|
-watch([() => props.width, () => props.height],(newVal, oldVal) => {
|
|
|
- if(chartIns.value){
|
|
|
- const echartIns = toRaw(chartIns.value)
|
|
|
- nextTick(() => echartIns.resize())
|
|
|
- }
|
|
|
-})
|
|
|
-const store = useStore()
|
|
|
-const collapse = computed({
|
|
|
- get(){
|
|
|
- return store.state.collapse
|
|
|
- },
|
|
|
- set(val){}
|
|
|
-})
|
|
|
-watch(collapse, (val) => {
|
|
|
- if(chartIns.value){
|
|
|
- setTimeout(() => {
|
|
|
- chartIns.value?.resize()
|
|
|
- },300)
|
|
|
- }
|
|
|
-})
|
|
|
-const funBrushChange = (flag) => {
|
|
|
- const echartIns = toRaw(chartIns.value)
|
|
|
- echartIns.dispatchAction({
|
|
|
- type: "takeGlobalCursor",
|
|
|
- // 如果想变为“可刷选状态”,必须设置。不设置则会关闭“可刷选状态”。
|
|
|
- key: "brush",
|
|
|
- brushOption: {
|
|
|
- seriesIndex: [1],
|
|
|
- yAxisIndex: 0,
|
|
|
- transformable: true,
|
|
|
- throttleType: "debounce",
|
|
|
- throttleDelay: 1000,
|
|
|
- removeOnClick: true,
|
|
|
- brushType: flag? "polygon" : false,
|
|
|
- brushMode: "multiple",
|
|
|
- brushStyle: {
|
|
|
- borderWidth: 1,
|
|
|
- color: "rgba(255,36,36,0.2)",
|
|
|
- borderColor: "#ff2424",
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- echartIns.off("brushSelected");
|
|
|
- echartIns.on("brushSelected", (params) => {
|
|
|
- emits("getSelected", params.batch || []);
|
|
|
- });
|
|
|
-}
|
|
|
-watch(() => props.brush, (newVal, oldVal) => funBrushChange(newVal))
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- nextTick(() => {
|
|
|
- echarts.registerTheme('chartTheme', chartTheme)
|
|
|
- const echartIns = echarts.init(document.getElementById(chartId),'chartTheme')
|
|
|
- chartIns.value = echartIns
|
|
|
- echartIns.setOption(option.value)
|
|
|
- funBrushChange(props.brush)
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- echartIns.resize()
|
|
|
- })
|
|
|
- })
|
|
|
-})
|
|
|
-</script>
|
|
|
-<template>
|
|
|
- <div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
|
|
|
-</template>
|