SmartOpsWeb/src/views/custom-query/echarts-editor/EchartsDesign.vue

<template>
  <div>
    <EchartsEditor :info="initInfo" :line-data="lineChartsItem" :bar-data="barChartsItem" :pie-data="pieChartsItem"
                   :radar-data="radarChartsItem" :radar-indicator="indicator" @getFinalInfo="getFinalInfo"/>
  </div>
</template>

<script setup>
import EchartsEditor from "./components/EchartsEditor.vue";
//入参
const lineChartsItem = ref([
  {
    id: 1,
    unit: '年份',
    type: '',
    dataType: 'key',
    color: '',
    label: '年份',
    symbol: "",
    symbolSize: 0,
    showSymbol: false,
    lineStyle: {
      shadowColor: '',//阴影颜色
      shadowBlur: 0,//图形阴影的模糊大小
      opacity: 1
    },
    data: ['2013', '2014', '2015', '2016', '2017', '2018']
  },
  {
    id: 2,
    unit: '年销量',
    type: 'line',
    dataType: 'value',
    color: '#9a60b4',//图形颜色
    label: '华北',
    symbol: "triangle",//标记的图形circle:圆形,rect:矩形,triangle:三角形,diamond:钻石形,roundRect:圆角矩形,pin:圆钉形,arrow:箭头形,none:不显示标记
    symbolSize: 8,//标记的大小
    showSymbol: true,//是否显示标记,如果 false 则只有在 tooltip hover 的时候显示。
    lineStyle: {
      shadowColor: '',//阴影颜色
      shadowBlur: 0,//图形阴影的模糊大小
      opacity: 1//图形透明度
    },
    data: [40, 80, 20, 120, 140, 50]
  },
  {
    id: 3,
    unit: '年销量',
    type: 'line',
    dataType: 'value',
    color: '#3ba272',
    label: '华东',
    symbol: "circle",
    symbolSize: 8,
    showSymbol: true,
    lineStyle: {
      shadowColor: '',//阴影颜色
      shadowBlur: 0,//图形阴影的模糊大小
      opacity: 1
    },
    data: [140, 180, 120, 40, 50, 150]
  },
  {
    id: 4,
    unit: '年销量',
    type: 'line',
    dataType: 'value',
    color: '#5470c6',
    label: '华南',
    symbol: "rect",
    symbolSize: 8,
    showSymbol: true,
    lineStyle: {
      shadowColor: '',//阴影颜色
      shadowBlur: 0,//图形阴影的模糊大小
      opacity: 1
    },
    data: [110, 143, 68, 90, 120, 130]
  }
])
const barChartsItem = ref([
  {
    id: 1,
    unit: '年份',
    type: '',
    dataType: 'key',
    color: '',
    label: '年份',
    showBackground: false,
    backgroundStyle: {
      color: '',
      borderWidth: 0,
      borderColor: '',
      borderType: 'solid',
    },
    data: ['2013', '2014', '2015', '2016', '2017', '2018']
  },
  {
    id: 2,
    unit: '销售金额',
    type: 'bar',
    dataType: 'value',
    color: '#9a60b4',//图形颜色
    label: '王五',
    showBackground: true,//是否显示柱条的背景色
    backgroundStyle: {
      color: '#e5e2e2',//柱条的颜色
      borderWidth: 0,//柱条的描边宽度，默认不描边。
      borderColor: '#000',//柱条的描边颜色
      borderType: 'dotted',//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'
    },
    data: [40, 80, 20, 120, 140, 50]
  },
  {
    id: 3,
    unit: '销售金额',
    type: 'bar',
    dataType: 'value',
    color: '#3ba272',
    label: '李四',
    showBackground: true,
    backgroundStyle: {
      color: '#e5e2e2',
      borderWidth: 0,
      borderColor: '#000',
      borderType: 'dashed',
    },
    data: [140, 180, 120, 40, 50, 150]
  },
  {
    id: 4,
    unit: '销售金额',
    type: 'bar',
    dataType: 'value',
    color: '#2644a4',
    label: '张三',
    showBackground: true,
    backgroundStyle: {
      color: '#e5e2e2',
      borderWidth: 0,
      borderColor: '#000',
      borderType: 'solid',
    },
    data: [110, 143, 68, 90, 120, 130]
  }
])
const pieChartsItem = ref([
  {id: 1, label: '京东', dataType: 'value', value: 335},
  {id: 2, label: '菜鸟', dataType: 'value', value: 310},
  {id: 3, label: '总部', dataType: 'value', value: 234},
  {id: 4, label: '小电商', dataType: 'value', value: 135},
])
const radarChartsItem = ref([
  {label: 'Allocated Budget', dataType: 'value', data: [4200, 3000, 20000, 35000, 50000, 18000]},
  {label: 'Actual Spending', dataType: 'value', data: [5000, 14000, 28000, 26000, 42000, 21000]},
])
//定义好echarts的配置数据
let initInfo = reactive({
  xValueAxis: [],
  yValueAxis: [],
  //echarts配置数据
  echartsOptions: {
    //图例
    legend: {
      data: [],
      selected: {},
      selectedMode: false
    },
    //离容器四侧的距离
    grid: {
      left: 40, // 左边距
      right: 60, // 右边距
      top: 40, // 顶边距
      bottom: 20, // 底边距
      // containLabel: true,
    },
    //提示框组件
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    //工具栏
    // toolbox: {
    //   feature: {
    //     //重置按钮显示
    //     restore: {
    //       show: true,
    //       title: '重置'
    //     }
    //   }
    // },
    //X轴
    xAxis: {
      name: '',
      type: 'category',
      data: [],
      axisLine: {
        show: true
      }
    },
    //Y轴
    yAxis: {
      name: '',
      type: 'value',
      data: [],
      axisLine: {
        show: true
      }
    },
    radar: {
      // shape: 'circle',
    },
    //配置项
    series: []
  }
})
const indicator=  ref([
  { name: 'Sales', max: 6500 },
  { name: 'Administration', max: 16000 },
  { name: 'Information Technology', max: 30000 },
  { name: 'Customer Support', max: 38000 },
  { name: 'Development', max: 52000 },
  { name: 'Marketing', max: 25000 }
])
//获取到拖拽后的数据
const getFinalInfo = (val) => {
  // console.log('父组件获取最终数据', val)
  if (val !== undefined) {
    initInfo = val
  }
}
getFinalInfo()
</script>