123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <template>
- <div class="screen-common-component">
- <ScreenComHeader :module-id="moduleId" title="产品生产情况" />
- <div ref="chartRef" class="charts-container"></div>
- </div>
- </template>
- <script lang="ts" setup>
- import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
- import * as echarts from "echarts";
- import { chartLegend } from "@/views/screens/configs/chartsConfig";
- const chartRef = ref(null);
- const option = {
- legend: chartLegend,
- tooltip: {},
- dataset: {
- dimensions: ["product", "2015", "2016", "2017"],
- source: [
- { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
- { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
- { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
- { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
- ],
- },
- xAxis: { type: "category" },
- yAxis: {
- // axisLine: { show: false },
- // axisTick: { show: false },
- splitLine: { show: false },
- },
- // Declare several bar series, each will be mapped
- // to a column of dataset.source by default.
- series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
- };
- onMounted(() => {
- const chart = echarts.init(chartRef.value);
- chart.setOption(option);
- });
- const props = defineProps({
- moduleId: {
- type: String,
- required: true,
- },
- });
- </script>
- <style lang="scss" scoped></style>
|