4 Star 25 Fork 8

liangei / lime-echart

 / 详情

请问在taro的vue3下的配置

待办的
创建于  
2022-05-28 22:40

麻烦请问下,我看了你taro版本的语法,然后改了一下到项目上就一直用不了

主要是不太明白这一段初始化的判断,我这里一直value就是init失败

    const chart = ref(null)
            onMounted(() => {
                console.log(chart.value)
                if (chart.value) {
                    chart.value.init(echarts, (chart) => {
                        chart.setOption(option);
                    });
                }
            })

完整代码

<template>
    <view class="report">
        <l-echart ref="chart" style="width: 100%; height:500px"></l-echart>
    </view>
</template>

<script>
    import {ref, reactive, toRefs, onMounted} from 'vue';
    import Taro from '@tarojs/taro'
    import styles from "./report.module.scss";

    import LEchart from "@/components/lime-echart";
    // 按需引入
    import * as echarts from "echarts/core";
    import {LineChart} from "echarts/charts";
    import {
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LegendComponent,
    } from "echarts/components";
    // 标签自动布局,全局过渡动画等特性
    import {LabelLayout, UniversalTransition} from "echarts/features";
    // 引入 Canvas 渲染器,注意引入 CanvasRenderer 是必须的一步
    import {CanvasRenderer} from "echarts/renderers";

    // 注册必须的组件
    echarts.use([
        LegendComponent,
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);
    //-------------------------------------

    const option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            confine: true,
        },
        legend: {
            data: ["热度", "正面", "负面"],
        },
        grid: {
            left: 20,
            right: 20,
            bottom: 15,
            top: 40,
            containLabel: true,
        },
        xAxis: [
            {
                type: "value",
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                    },
                },
                axisLabel: {
                    color: "#666666",
                },
            },
        ],
        yAxis: [
            {
                type: "category",
                axisTick: {show: false},
                data: [
                    "汽车之家",
                    "今日头条",
                    "百度贴吧",
                    "一点资讯",
                    "微信",
                    "微博",
                    "知乎",
                ],
                axisLine: {
                    lineStyle: {
                        color: "#999999",
                    },
                },
                axisLabel: {
                    color: "#666666",
                },
            },
        ],
        series: [
            {
                name: "热度",
                type: "bar",
                data: [300, 270, 340, 344, 300, 320, 310],
            },
            {
                name: "正面",
                type: "bar",
                stack: "总量",
                data: [120, 102, 141, 174, 190, 250, 220],
            },
            {
                name: "负面",
                type: "bar",
                stack: "总量",
                data: [-20, -32, -21, -34, -90, -130, -110],
            },
        ],
    };


    export default {
        name: "report",
        components: {
            LEchart
        },
        created() {
            // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用,
            // 而不是频繁地调用此 API
            this.$instance = Taro.getCurrentInstance()
        },
        mounted() {
            // this.\$instance.router.params

        },
        setup() {
            const state = reactive({
                styles,
            });
            const chart = ref(null)
            onMounted(() => {
                console.log(chart.value)
                if (chart.value) {
                    chart.value.init(echarts, (chart) => {
                        chart.setOption(option);
                    });
                }
            })
            return {
                ...toRefs(state),
                chart
            }
        }
    }
</script>

评论 (3)

Su孤兒zzzzzzzJ 创建了任务
Su孤兒zzzzzzzJ 修改了描述
展开全部操作日志

你写得没有问题, 就是我的示例少引入了BarChart类型。

import {LineChart, BarChart} from "echarts/charts";


echarts.use([
        LegendComponent,
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);

不好意思,还是不行,他一直就提示
console控制台报错
Unhandled promise rejection TypeError: chart.value.init is not a function

好的,我再试试看,麻烦了

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
1
https://gitee.com/liangei/lime-echart.git
git@gitee.com:liangei/lime-echart.git
liangei
lime-echart
lime-echart

搜索帮助