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&q来源gaodaima#com搞(代@码网uot;。

如果使用的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]
        }
      ]
    });
  }

效果

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

更多web开发相关知识，请查阅 搞代码网 ！！

以上就是vue.js中能用echarts么？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)