vue中的Echarts的使用

Echarts是一个将数据可视化以图表的形式展现给用户
1.全局安装

npm install echerts -S

2.在main.js中使用

//引入
import echarts from 'echarts'
将其继承在vue的原型上
Vue.prototype.$echarts = echarts

创建Echarts.vue组件

<template>
  <div style="min-width: 100%; min-height: 6.00rem;"  id="main" ref="myEchart"></div>
</template>

<script>
    export default {
        name: "Echarts",
       data(){
          return{
            //默认值
            SearchList:[
              "美食",
              "酒店",
              "超市",
              "银行",
            ]
          }
       },
        mounted(){
          var searcher=window.localStorage.getItem("historyItems")
            console.log(searcher.split("|"))
          this.SearchList=searcher.split("|")
          this.Line()
          },
          methods:{
          Line() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
              baseOption:{
                title : {
                  text: '搜索数据统计',
                  subtext: '阿里采集'
                },
                tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#ccc'
                    }
                  }
                },
                legend: {
                  data:['直接访问','搜索引擎']
                },
                toolbox: {
                  feature: {
                    saveAsImage: {}
                  }
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis : [
                  {
                    type : 'category',
                    boundaryGap : false,
                    data : this.SearchList
                  }
                ],
                yAxis : [
                  {
                    type : 'value'
                  }
                ],
                series : [
                  {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[320, 332, 301, 334, 390, 330, 320]
                  },
                  {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    areaStyle: {normal: {}},
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                  }
                ],
              },
              media: [
                {
                  query: {
                    minWidth: 50,
                    maxHeight: 600,
                    minAspectRatio: 3
                  },
                  option: {
                    title : {
                      text: '搜索数据统计',
                      subtext: '阿里采集'
                    },
                    tooltip : {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'cross',
                        label: {
                          backgroundColor: '#ccc'
                        }
                      }
                    },
                    legend: {
                      data:['直接访问','搜索引擎'],
                    },
                    toolbox: {
                      feature: {
                        saveAsImage: {
                          left:'50%'
                        }
                      }
                    },
                    grid: {
                      left: '10%',
                      right: '10%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis : [
                      {
                        type : 'category',
                        boundaryGap : false,
                        data : this.SearchList,
                        left:'3%'
                      }
                    ],
                    yAxis : [
                      {
                        type : 'value'
                      }
                    ],
                    series : [
                      {
                        name:'直接访问',
                        // type:'line',
                        stack: '总量',
                        areaStyle: {normal: {}},
                        data:[320, 332, 301, 334, 390, 330, 320]
                      },
                      {
                        name:'搜索引擎',
                        // type:'line',
                        stack: '总量',
                        label: {
                          normal: {
                            show: true,
                            position: 'top'
                          }
                        },
                        areaStyle: {normal: {}},
                        data:[820, 932, 901, 934, 1290, 1330, 1320]
                      }
                    ],

                  }
                },
              ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          }
        }
    }
</script>

<style scoped>

</style>

将官网中的 js部分封装成一个方法在mounted中调用。

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

需要那种数据统计表只需将其属性放在option中。就可以直接使用