前言

经常会用到图形统计对数据进行扁平化显示，下面文章中使用echarts进行了简单的统计图形展示。

一、ECharts安装

官网：Apache ECharts

配置项文档：Documentation - Apache ECharts

安装： Handbook - Apache ECharts

从npm获取：

npm install echarts --save

在使用的地方引用echarts

import * as echarts from 'echarts';

二、饼图使用实例

使用饼图对总数中各部分的占比进行展示。如下实例：

代码如下：

//chartSite为html结构中定义的id节点
let myChart = echarts.init(document.getElementById("chartSite"));
let option = {
    title:{text:'在线/离线站点统计',left:'center'},//标题
    tooltip: { trigger: 'item'},//提示框组件
    legend: {top: '10%',left: 'center'},//图例
    color:['#65b704','#e65757'],
    series: [{ name: '站点总数：' +this.siteState.total ,type: 'pie',
               radius: ['40%','70%'],avoidLabelOverlap: false,
    itemStyle: { borderRadius: 10,borderColor: '#fff',borderWidth: 2 },//图形形式
    label: {show:true,
         normal:{show:true,position:'center',fontSize: 16,
         formatter:'站点总数：{total|'+this.siteState.total+'}',
         rich:{total: { fontSize: 20, color: '#e65757', lineHeight: 40 }}}},
    emphasis: {label: {show: true}
    },
    labelLine: {show: false},
    data: [
         { value: this.siteState.onLine, name: '在线站点' },
         { value: this.siteState.offLine, name: '离线站点' },
     ]
  }
 ]
 };
myChart.setOption(option)

三、堆叠柱状图使用实例

一个柱状上展示多个数据值。堆叠显示，同时在柱状顶部显示多个堆叠数据的和。如下实例：

代码如下：

let self  =this;
let myChart = echarts.init(document.getElementById("chartAlarm"));
let option = {
    title:{text:'各站点告警数量统计',left:'center'},
    tooltip: {show:true,trigger: 'axis',axisPointer: {type: 'shadow'}},
    legend: {top:'10%',left:'right'},
    grid: {top:'18%',left: '3%',right: '4%',bottom: '12%',containLabel: true},
    xAxis: [{type: 'category',data: self.siteAlarms.siteName,}],
    yAxis: [{type: 'value'}],
    dataZoom:[
         { type: 'slider', //滑动条
           show: true,      //开启
           start: 1,    //初始化时，滑动条宽度开始标度
           end: 35      //初始化时，滑动条宽度结束标度
         },
         //X轴内置滑动
        {
         type: 'inside',  //内置滑动，随鼠标滚轮展示
         start: 1,//初始化时，滑动条宽度开始标度
         end: 35  //初始化时，滑动条宽度结束标度
　　　　} 
    ],
    series: [
         {name:'告警总计',type:'bar',stack:'To',color:'#e6e3e37d',
       label:{normal:{show:true,position:'top',color:'#ef5757',fontWeight:'bold'}},
      data:self.siteAlarms.siteAlarmTotal,barWidth: "50%",barGap:'-100%' },
            //barGap:'-100%',移动位置，放置堆叠柱状图后
      {name: '低级告警',type: 'bar',stack: 'Ad',color:'#5E9B0F',
        emphasis: {focus: 'series'}, data: self.siteAlarms.alarmLevel0,
        barWidth: "50%",label:{show:true}},
      {name: '中级告警',type: 'bar',stack: 'Ad',color:'#EF9E19',
        emphasis: {focus: 'series'},data:self.siteAlarms.alarmLevel1,
        barWidth: "50%",label:{show:true}},
      {name: '高级告警',type: 'bar',stack: 'Ad',color:'#d9534f',
        emphasis: {focus: 'series'},data: self.siteAlarms.alarmLevel2,
        barWidth: "50%",label:{show:true}},
    ]
 };
myChart.setOption(option)

四、折线图实例

折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。通过折线图展示x轴各个点所对应的数值。实例如下：

代码如下：

let self  =this;
let myChart = echarts.init(document.getElementById("chartHealth"));
let option = {
    title:{text:'各站点获取率',left:'center'},
    tooltip:{trigger: 'axis',valueFormatter: (value) =>  value + '%'},
    grid: { left: '4%', right: '4%',bottom: '18%',containLabel: false},
    xAxis: {type: 'category',data:self.healthName},
    yAxis: {type: 'value',axisLabel: {formatter: '{value} %'}},
    dataZoom:[{ type: 'slider', show: true, start: 1, end: 35},
                { type: 'inside',  start: 1,end: 35, } ],
    series: [{data: self.healthCatch,type: 'line'}]
};
myChart.setOption(option)

对使用过的echarts实例进行记录，方便后期查看。仅供参考......

vue中使用echarts的例子

前言

一、ECharts安装

二、饼图使用实例

三、堆叠柱状图使用实例

四、折线图实例

猜你喜欢

vue中使用echarts的例子

前言

一、ECharts安装

二、饼图使用实例

三、 堆叠柱状图使用实例

四、 折线图实例

猜你喜欢

三、堆叠柱状图使用实例

四、折线图实例