循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

npm install echarts vue-echarts

<script>import ECharts from'vue-echarts' //主图表对象
import'echarts/lib/chart/line' //曲线图表
import'echarts/lib/chart/bar' //柱状图
import'echarts/lib/chart/pie' //饼状图
import'echarts/lib/component/tooltip' //提示信息

export default{

  components: {'v-chart': ECharts

  },

//注册组件后即可使用

Vue.component('v-chart', VueECharts)

<v-chartref="simplebar":options="simplebar"autoresize/>

data() {return{

      simplebar: {

        title: { text:'柱形图Demo'},

        tooltip: {},

        xAxis: {

          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

        },

        yAxis: {},

        series: [{

          name:'销量',

          type:'bar',

          data: [5, 20, 36, 10, 10, 20]

        }]

      }

    }

  }

<v-chartref="pie":options="pie"autoresize/>

<script>import ECharts from'vue-echarts' //主图表对象
import'echarts/lib/chart/line' //曲线图表
import'echarts/lib/chart/bar' //柱状图
import'echarts/lib/chart/pie'//饼状图
import'echarts/lib/component/tooltip' //提示信息

//导入报表数据
import getBar from'./chartdata/bar'import pie from'./chartdata/pie'import scatter from'./chartdata/scatter'import lineChart from'./chartdata/lineChart'import incomePay from'./chartdata/incomePay'exportdefault{

  components: {'v-chart': ECharts

  },return{

      pie,

      scatter,,

      lineChart,

      incomePay,

      simplebar: {

        title: { text:'柱形图Demo'},

        tooltip: {},

        xAxis: {

          data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']

        },

        yAxis: {},

        series: [{

          name:'销量',

          type:'bar',

          data: [5,20,36,10,10,20]

        }]

      }

    }

  },

export default{

  title: {

    text:'饼图程序调用高亮示例',

    x:'center'},

  tooltip: {

    trigger:'item',

    formatter:'{a} <br/>{b} : {c} ({d}%)'},

  legend: {

    orient:'vertical',

    left:'left',

    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']

  },

  series: [

    {

      name:'访问来源',

      type:'pie',

      radius:'55%',

      center: ['50%', '60%'],

      data: [

        { value:335, name: '直接访问'},

        { value:310, name: '邮件营销'},

        { value:234, name: '联盟广告'},

        { value:135, name: '视频广告'},

        { value:1548, name: '搜索引擎'}

      ],

      itemStyle: {

        emphasis: {

          shadowBlur:10,

          shadowOffsetX:0,

          shadowColor:'rgba(0, 0, 0, 0.5)'}

      }

    }

  ]

}

<stylescoped>.echarts{width:100%;height:400px;}.el-row{margin-bottom:20px;
  }.el-col{border-radius:4px;margin-bottom:20px;
  }
</style>