想通过dataset方式设置echarts图形,怎么也无法展示正确结果?

作者站长头像
站长
· 阅读数 21

vue 2.7echarts 5.4vue-echarts 6.2.3

预期结果:想通过dataset方式设置echarts图形,怎么也无法展示正确结果?

实际结果:想通过dataset方式设置echarts图形,怎么也无法展示正确结果?

但是把代码option复制到https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align 却能正常展示,服了啊。

代码如下:

<template>
    <div style="width: 500px; height: 300px;">
        <v-chart ref="chartRef" :option="option" autoresize />
    </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, PieChart } from "echarts/charts";
import { TitleComponent, GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";

use([
  CanvasRenderer,
  BarChart,
  PieChart,
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);


export default {
    components: {
        VChart
    },
    data() {
        return {
            option: {
                backgroundColor: "rgba(0,0,0,0)",
                title: {
                    text: '用例数据'
                },
                legend: {
                    show: true,
                    top: "5%",
                    textStyle: { color: "#B9B8CE" }
                },
                "grid": {
                    "show": false,
                    "left": "10%",
                    "top": "60",
                    "right": "10%",
                    "bottom": "60"
                },
                "tooltip": {
                    "show": true,
                    "trigger": "axis",
                    "axisPointer": { "show": true, "type": "shadow" }
                },
                "xAxis": {
                    "show": true,
                    "name": "",
                    "nameGap": 15,
                    "nameTextStyle": { "color": "#B9B8CE", "fontSize": 12 },
                    "inverse": false,
                    "axisLabel": {
                        "show": true,
                        "fontSize": 12,
                        "color": "#B9B8CE",
                        "rotate": 0
                    },
                    "position": "bottom",
                    "axisLine": {
                        "show": true,
                        "lineStyle": { "color": "#B9B8CE", "width": 1 },
                        "onZero": true
                    },
                    "axisTick": { "show": true, "length": 5 },
                    "splitLine": {
                        "show": false,
                        "lineStyle": { "color": "#484753", "width": 1, "type": "solid" }
                    },
                    "type": "category"
                },
                "yAxis": {
                    "show": true,
                    "name": "",
                    "nameGap": 15,
                    "nameTextStyle": { "color": "#B9B8CE", "fontSize": 12 },
                    "inverse": false,
                    "axisLabel": {
                        "show": true,
                        "fontSize": 12,
                        "color": "#B9B8CE",
                        "rotate": 0
                    },
                    "position": "left",
                    "axisLine": {
                        "show": true,
                        "lineStyle": { "color": "#B9B8CE", "width": 1 },
                        "onZero": true
                    },
                    "axisTick": { "show": true, "length": 5 },
                    "splitLine": {
                        "show": true,
                        "lineStyle": { "color": "#484753", "width": 1, "type": "solid" }
                    },
                    "type": "value"
                },

                //用 dataset 方式,无法正确展示图形
                "dataset": {
                    "dimensions": ["product", "data1", "data2"],
                    "source": [
                        { "product": "Mon", "data1": 120, "data2": 130 },
                        { "product": "Tue", "data1": 200, "data2": 130 },
                        { "product": "Wed", "data1": 150, "data2": 312 },
                        { "product": "Thu", "data1": 80, "data2": 268 },
                        { "product": "Fri", "data1": 70, "data2": 155 },
                        { "product": "Sat", "data1": 110, "data2": 117 },
                        { "product": "Sun", "data1": 130, "data2": 160 }
                    ]
                },
                "series": [
                    {
                        "type": "bar",
                        "barWidth": 15,
                        "label": {
                            "show": true,
                            "position": "top",
                            "color": "#fff",
                            "fontSize": 12
                        },
                        "itemStyle": { "color": null, "borderRadius": 2 },
                    },
                    {
                        "type": "bar",
                        "barWidth": 15,
                        "label": {
                            "show": true,
                            "position": "top",
                            "color": "#fff",
                            "fontSize": 12
                        },
                        "itemStyle": { "color": null, "borderRadius": 2 },
                    }
                ],

                
            }
        }
    }
}
</script>
回复
1个回答
avatar
test
2024-07-16
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容