vue webpack 使用 echarts

vue webpack 使用 echarts

引入echart

npm install echarts -S

全局引用，在main.js添加如下代码

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

官方配置项说明地址：官方地址

折线图

<template>
  <div class="hello">
    <div id="myChart" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    mounted() {
      this.chartInit();
    },
    methods: {
      chartInit() {
        var myChart = document.getElementById('myChart');
        var chart = this.$echarts.init(myChart);
        var option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }]
        };
        chart.setOption(option);
      }
    }
  }
</script>

柱状图

<template>
  <div class="hello">
    <div id="myChart" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    mounted() {
      this.chartInit();
    },
    methods: {
      chartInit() {
        var myChart = document.getElementById('myChart');
        var chart = this.$echarts.init(myChart);
        var option = {
          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'
          }]
        };
        chart.setOption(option);
      }
    }
  }
</script>

饼图

<template>
  <div class="hello">
    <div id="myChart" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    mounted() {
      this.chartInit();
    },
    methods: {
      chartInit() {
        var myChart = document.getElementById('myChart');
        var chart = this.$echarts.init(myChart);
        var option = {
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 1048,
                name: '搜索引擎'
              },
              {
                value: 735,
                name: '直接访问'
              },
              {
                value: 580,
                name: '邮件营销'
              },
              {
                value: 484,
                name: '联盟广告'
              },
              {
                value: 300,
                name: '视频广告'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        chart.setOption(option);
      }
    }
  }
</script>

环形饼图（中间是空的）

<template>
  <div class="hello">
    <div id="myChart" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    mounted() {
      this.chartInit();
    },
    methods: {
      chartInit() {
        var myChart = document.getElementById('myChart');
        var chart = this.$echarts.init(myChart);
        var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};
        chart.setOption(option);
      }
    }
  }
</script>