init : 初始化仓库

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

@@ -0,0 +1,233 @@
+<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>