• 在Vue 项目中使用echarts


    第一种方法,直接引入echarts

    1. 安装echarts项目依赖
        npm install echarts --save
    2.  在main.js中全局引入
        import echarts from "echarts";
        Vue.prototype.$echarts = echarts;
    <template>
      <div id="app">
        <div id="main" style=" 600px;height:400px;"></div>
      </div>
    </template>

    js部分 script 代码

    <script>
    export default {
      name: "app",
      methods: {
        drawChart() {
          // 基于准备好的dom,初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("main"));
          // 指定图表的配置项和数据
          let option = {
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            legend: {
              data: ["销量"]
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      },
      mounted() {
        this.drawChart();
      }
    };
    </script>

    第二种方法,使用 Vue-ECharts 组件

    步骤一 : 安装组件

    npm install vue-echarts -S

    步骤二 : 使用组件

    <template>
      <div id="app">
        <v-chart class="my-chart" :options="bar"/>
      </div>
    </template>
    <script>
    import ECharts from "vue-echarts/components/ECharts";
    import "echarts/lib/chart/bar";
    export default {
      name: "App",
      components: {
        "v-chart": ECharts
      },
      data: function() {
        return {
          bar: {
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            legend: {
              data: ["销量"]
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        };
      }
    };
    </script>
    <style>
    .my-chart {
       800px;
      height: 500px;
    }
    </style>
  • 相关阅读:
    Codeforces Round #346 (Div. 2) F. Polycarp and Hay 并查集 bfs
    Codeforces Round #346 (Div. 2) E. New Reform dfs
    Codeforces Round #346 (Div. 2) D. Bicycle Race 叉积
    Codeforces Round #346 (Div. 2) C. Tanya and Toys 贪心
    Codeforces Round #346 (Div. 2) B. Qualifying Contest 水题
    Codeforces Round #346 (Div. 2) A. Round House 水题
    VK Cup 2016
    Entity Framework DBFirst尝试
    Entity Framework简介
    设计模式之十(外观模式)
  • 原文地址:https://www.cnblogs.com/rose-sharon/p/11755418.html
Copyright © 2020-2023  润新知