vue.js中能用echarts么?

vue.js中能用echarts么?答案是:可以。下面本篇文章给大家介绍一下Vue.js中使用ECharts的方法和注意事项。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

npm 安装 ECharts

npm install echarts --save

引入ECharts

更多按需引入 ECharts 图表和组件可参考在 webpack 中使用 ECharts

import echarts from "echarts";

准备容器

5 分钟上手 ECharts中有说明。

注意 准备一个具备 高宽 的 DOM 容器,一定要具有宽高,否则,容器内没有任何展示,且js没有任何错误。

    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

初始化初始化echarts实例和绘制图表

注意 这个过程要在mounted的时候中执行,如果放在mountend之前(如:beforeMount、created、beforeCreate)都无法完成渲染,引发 "TypeError: Cannot read property 'getAttribute' of null"。

如果使用的vue-echarts,options也是在mounted执行。

  mounted() {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例"
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }

效果

1.jpg

更多效果、参数配置请参考 官方API

更多web开发相关知识,请查阅 HTML中文网 !!

以上就是vue.js中能用echarts么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏