vue 中使用echarts

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/adley_app/article/details/84377577

安装

npm i echarts -S

main中引入

import echarts from 'echarts'

// 将其继承在vue的原型上
Vue.prototype.$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{
          }
        },
        mounted(){
          var searcher=window.localStorage.getItem("historyItems")
          this.SearchList=searcher.split("|")
          this.Line()
        },
        methods:{
          Line() {
            var myChart = this.$echarts.init(document.getElementById('main'));
            // 配置
             var option = {
                    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]
                  		}
                	],
                  legend: {
                      data:['直接访问','搜索引擎'],
                  }
            };
              
            myChart.setOption(option);
          }
        }
    }
</script>

<style scoped>
</style>