• 在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>
  • 相关阅读:
    88. Merge Sorted Array
    87. Scramble String
    86. Partition List
    85. Maximal Rectangle
    84. Largest Rectangle in Histogram
    83. Remove Duplicates from Sorted List
    82. Remove Duplicates from Sorted List II
    81. Search in Rotated Sorted Array II
    80. Remove Duplicates from Sorted Array II
    计算几何——点线关系(叉积)poj2318
  • 原文地址:https://www.cnblogs.com/rose-sharon/p/11755418.html
Copyright © 2020-2023  润新知