在vue中使用图表组件工具echarts（一）

本文介绍一款非常好用的图表绘画工具---echarts

---

npm 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts 

安装完成后，就可以在vue中使用了。

---

编写 echarts案例

<template>
  <div id="app">
    <div ref="chart" class="container"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: "App",
    mounted(){

      let myChart = echarts.init(this.$refs.chart);
      let option={
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
  myChart.setOption(option);



    }
  }

</script>

<style>
  .container{
    width:500px;
    height:300px;
  }

</style>

流程解释

1，通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中import echarts from ‘echarts’;得到 ECharts。
2， 基于准备好的dom，初始化echarts实例。let myChart = echarts.init(this.$refs.chart);（就是与div里面的chart绑定）
3，图表样例 let option={…}
4，绘制图表 myChart.setOption(option);

上面的是柱状图，我们想要折线图与饼状图示例（或者多个不同的图），只需要替换增加以上的不同option

折线图与饼状图示例

只需要替换option就可以了。

let option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      };

   let option3= {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      };

---