vue 项目中使用echarts起步

在组件<mychart.vue>中:

<template>
<div>
  <div ref="mychart"></div>
</div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    draw() {
      let echarts = require('echarts')
      // 基于准备好的dom,初始化echarts实例
      let myChart = this.$refs.mychart
      if (myChart) {
        let echartInit = echarts.init(myChart)  
        // 绘制图表
        echartInit.setOption({
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        });
      } else {
        console.log('myChart 为空');
      }
    }
  },
  mounted() {
    this.draw();
  }
};
</script>

<style>
#mychart {
  height: 500px;
}
</style>

值得注意的是,在 vue 项目中不推荐对 dom 的直接操作,例如

document.getElementId('my_div')

而应该使用 ref 引用来代替之:

<div ref = "myDiv"></div>
...
<script>
...
let myDiv = this.$refs.myDiv
</script>
全部评论

相关推荐

2025-12-31 19:23
已编辑
门头沟学院 Java
ssob是已读不回的,字节是压根不敢投的,简历是反反复复改了N遍的,八股是永远背不完的😅😅😅扯远了,道心破碎了,把简历发出来让大伙先看看笑话。再说正事。寒假日常实习还是很难找,连个面试都难约,我不是个例,这是网上普遍反映。不报希望了,趁着2、3月前赶紧做些什么才是。扔几个碎碎念:1.这破简历还能怎么改?写到什么程度才能过实习岗筛选?广大牛友来锐评一下2.火速辅修go,是否可行目前看来是学习成本最小的。首先,很多go实习岗位已经明确要求掌握gin等技术栈,拿java简历投go的时代已经过去了。其次,很多后端的东西,MySQL、Redis这些都是通用的,不用重新学。所以这个问题就具体为:2.1&nbsp;java&amp;go混血简历怎么写第一个项目,仿大麦的微服务,不太好改。因为有用到Redisson、AOP、SpringAI这些java强相关的东西,包装成go需要替换这些方案。第二个,点评魔改。应该可以包装成go,github上也有人用go重写过。2.2&nbsp;java&amp;go通用的轮子RPC直接pass了,太烂大街了。不知道动态线程池能不能做。反正项目上新有风险,不一定来得及,非必要就不开新的项目。补充:别跟我扯RAG了,这玩意已经成新的烂大街了,详见我上一篇的吐槽。3.认真学微调prompt什么的这个半步踩进算法了已经。八股和场景题完全就是另一套,没两三个月搞不定的。约等于换方向
简历中的项目经历要怎么写
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务