echarts技术分享

2.1全局引入main.js中配置（不推荐使用，会导致包过大，冗余多）

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用
1
2
2.2组件内按需引入 ( 推荐使用 )
这种方式很简单，在需要引入图表的组件引入,例如如下引入柱状图。

//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");

柱状图

<template>
    <div>
      <div class="bar" ref="bar" style="width: 1000px;height: 500px;
      border: 1px solid red;padding: 10px;margin:  0 auto;"></div>
    </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  props: {},
  components: {},
  computed: {},
  watch: {},
  mounted () {this.drawCharts()},
  methods: {
    //ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器
    // 通过 cnpm 获取 echarts，cnpm install echarts --save
    // 为ECharts准备一个具备大小（宽高）的Dom
    drawCharts (){
      // 柱状图
      // 基于准备好的dom，初始化echarts实例
      let barChart = this.$echarts.init(this.$refs.bar);
      let xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
      var yDataArr = [88, 92, 63, 77, 93, 80, 72, 86]
      // 绘制图表
      barChart.setOption({
        xAxis:{//x轴数据源
          type:'category',
          data:xDataArr
          // typr:'value'//横向
        },
        // 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type
        // 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,
        // 那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制
        // 如果是横向的只需要把xxy交换参数
        yAxis:{//y轴数据源
          type:'value',//
          // type:'category',//横向
          // data:yDataArr,//横向
          splitNumber:10, //分割段数
          interval:'10', //强制设置坐标轴分割间隔
          minInterval:20,//坐标轴最小间隔
          maxInterval:5

        },
        series:[//配置
          {
            type:'bar',//图表类型
            data:yDataArr,
            markPoint:{//标记点
              data:[
                {type:'max',name:'最大值'},{type:'min',name:'最小值'}//最大值和最小值 
              // {type:‘average’} 平均值
              // coord [x,y] 坐标位
              // symbolOffset 标记偏移
              // symbolSize 标记大小
              // value 最定制标记内容
              // symbol 标记图形包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ ,url
              ]
            },
            markLine:{//平均值,自动计算，改了数据源的数也会变
              data:[{type:'average',name:'平均值'}]
            },
            label:{//数值显示
              show:true,//是否可见
              rotate:60,//旋转角度
              position:'inside'//显示位置,如果是横向的要改成right
            },
            // barWidth:'30%',//主的宽度
          },
          {
            name: '语文',
            type: 'bar',
            data: yDataArr,
            itemStyle: {
              // temStyle都会有normal和emphasis两个选项，normal选项是正常展示下的样式，emphasis是鼠标 hover 时候的高亮样式。
              // 这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。
              normal: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                color:'#000',
              },
              emphasis: {
                color: '#fff'
              }
            },
          },
          {
            name: '数学',
            type: 'bar',
            data: [93, 60, 61, 82, 95, 70, 71, 86],
            color:'red',
          }
        ],
        legend:{//legend是图例，用于筛选类别，需要和series配合使用
          //legend中的data是一个数组,legend 中的data的值需要和series数组中的某组数据的name值一致
          data:['语文', '数学']
        },
        title:{//标题设置
          text:'成绩展示', // 标题文字
          textStyle:{// 标题文字样式设置
            color:'red'
          },
          borderWidth:'1', // 标题边框宽度
          borderColor:'blue', // 标题边框颜色
          bordeRadius:1,// 标题边框圆角
          left:50,// 标题距离左边的距离,标题本身类似position定位，需设置距离
          top:10 // 标题距离顶部的距离

        },
        tooltip:{
          trigger:'item',//触发类型可选值有item\axis,none 什么都不触发,,item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
          triggerOn:'click',//触发时机可选值有 mouseOver\click
          // formatter:'{b}:{c}'//格式化显示：分字符串和回调函数
          formatter:function (val){
            // console.log(val);
            return val.name+':'+val.data
          }//格式化显示：分字符串和回调函数
        },
        toolbox:{//工具栏，内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具
          feature:{
            aveAsImage: {}, // 将图表保存为图片
            dataView: {}, // 是否显示出原始数据
            restore: {}, // 还原图表
            dataZoom: {}, // 数据缩放
            magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
              type: ['bar', 'line','stack']//line 折线图,bar 柱状图,stack 堆叠
            }
          }
        },
        grid:{//图表网格
          show :true,//是否显示直角坐标系网格
          left:'5%',
          right:'5%',
          // top:'5%',
          bottom:'5%',
          backgroundColor:'#fff'
        },
        backgroundColor: '#2c343c'

      })
    }
  },
}
</script>
<style  scoped>

</style>

堆叠图

<template>
    <div>
 <div class="bar2" ref="bar2" style="width: 1000px;height: 500px;
      border: 1px solid red;padding: 10px;margin:  0 auto;"></div>
    </div>
</template>
<script>
export default {
  data () {
    return {num:320}
  },
  props: {},
  components: {},
  computed: {},
  watch: {},
  mounted () {this.drawCharts()},
  methods: {
    drawCharts (){//堆叠图主
      console.log(this.num);
      let bar2 = this.$echarts.init(this.$refs.bar2)
      bar2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'//鼠标悬停阴影特效
          }
        },
        legend: {
          // 在实际场景中也会经常用到聚合柱状图，以更直观地比较各维度信息。
          // 例如，在原来的代码中加入legend，再加入一批数据，并将x轴的星期改为不同商场
          data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场']
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']
        },
        series: [{
          name: 'A商场',
          type: 'bar',
          label: {
            show: true,
            position: 'inside'
          },
          // barWidth:'30%',
          // 这里的堆叠效果主要是通过stack参数决定的，当我们删除A商场的stack参数，并将B商场和C商场的stack参数改为“总量1”之后，
          // 。所以可以这样理解：stack参数相同的柱子会堆叠在一起，如果没有这个参数，则该部分不堆叠。
          data: [this.num, 302, 301, 334, 390, 330, 320]
        },
        {
          name: 'B商场',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'inside'
          },
          data: [320, 332, 301, 334, 490, 330, 310]
        },
        {
          name: 'C商场',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'inside'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'D商场',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'inside'
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
          name: 'E商场',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'inside'
          },
          data: [420, 532, 501, 234, 290, 330, 320]
        }]
      })
      bar2.on('click', function (params) {//ECharts 使用on 绑定事件，事件名称对应 DOM 事件名称，均为小写的字符串。如：
        //ECharts 支持常规的鼠标事件类型，包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
        // 所有的鼠标事件包含参数 params，如被点击的图形信息 params.componentType 。
        console.log(params.name);
      });
      //       组件交互事件监听
      // 在 ECharts 中基本上所有的组件交互行为都会触发相应的事件。如图例开关的行为会触发 legendselectchanged 事件：
      bar2.on('legendselectchanged', function (params) {
        // 获取点击图例的选中状态
        let isSelected = params.selected[params.name];
        // 在控制台中打印
        console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
        // 打印所有图例的状态
        console.log(params.selected);
      });
      bar2.dispatchAction({
        type: 'highlight',
        // 触发的行为类型
        // highlight 高亮
        // showTip 显示提示
        // downplay 取消高亮
        // hideTip 取消提示
        seriesIndex: 0,// 系列索引，用于寻找系列列表中的某个系列
        dataIndex: app.currentIndex//数据所有，用于寻找系列中的某个元素
      })
    }
  },
}
</script>
<style  scoped>

</style>

饼图

<template>
     <div>
 <div class="pie" ref="pie" style="width: 1000px;height: 500px;
      border: 1px solid red;padding: 10px;margin:  0 auto;"></div>
    </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  props: {},
  components: {},
  computed: {},
  watch: {},
  mounted () {this.drawCharts()},
  methods: {
    drawCharts (){
      let myChart = this.$echarts.init(this.$refs.pie);
      myChart.setOption({
        title:{
          text:'按类型统计',
          top:'bottom',
          left:'center',
          textStyle:{
            fontSize: 14,
            fontWeight: '',
            // color: '#333'
          },
        },//标题
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
          /*formatter:function(val){   //让series 中的文字进行换行
                 console.log(val);//查看val属性，可根据里边属性自定义内容
                 var content = var['name'];
                 return content;//返回可以含有html中标签
             },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
        },//提示框，鼠标悬浮交互时的信息提示
        legend: {
          show: true,
          type:'scroll',//滚动
          orient: 'vertical',
          x: 'left',
          data: ['50%-学生', '25%-老师', '25%-家长']
        },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
        graphic:{
          type:'text',
          left:'center',
          top:'center',
          style:{
            text:'用户统计\n'+'100', //使用“+”可以使每行文字居中
            textAlign:'center',
            font:'italic bolder 16px cursive',
            fill:'#000',//填充文字颜色
            width:30,
            height:30
          }
        },//此例饼状图为圆环中心文字显示属性
        series: [
          {
            name:'用户统计',//tooltip提示框中显示内容
            type: 'pie',//图形类型，如饼状图，柱状图等
            radius: ['10', '35%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
            // roseType:'area',//是否显示成南丁格尔图，默认false
            itemStyle: {
              normal:{
                label:{
                  show:true,
                  textStyle:{color:'#3c4858',fontSize:"18"},
                  formatter:function (val){   //让series 中的文字进行换行
                    return val.name.split("-").join("\n");},
                    
                  rich:{//label属性有rich自定义富文本时
                    name:'1111',
                    title: {
                      color: '#eee',
                      align: 'center'
                    },
                  },
                },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                labelLine:{
                  show:true,
                  lineStyle:{color:'#3c4858'}
                }//线条颜色
              },//基本样式
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                textColor:'#000'
              }//鼠标放在各个区域的样式
            },
            data: [
              {value: 25, name: '50%-学生'},
              {value: 25, name: '25%-老师'},
              {value: 45, name: '25%-家长'},
            ],//数据，数据中其他属性，查阅文档
            color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
          },//数组中一个{}元素，一个图，以此可以做出环形图
          {
            name:'角色分类统计',
            type: 'pie',
            radius: ['35%', '75%'],
            labelLine: {
              normal: {
                show: true,
              }
            },
            data:[
              { value: 10, name: '学生（小学）' },
              { value: 10, name: '学生（初中）' },
              { value: 5, name: '学生（高中）' },
              { value: 15, name: '教师（小学）' },
              { value: 15, name: '教师（初中）' },
              { value: 5, name: '教师（高中）' },
              { value: 20, name: '家长（小学）' },
              { value: 10, name: '家长（初中）' },
              { value: 15, name: '家长（高中）' },

            ],
            color:['#51CEC6','#6AE2D9','#96F5EF','#EF87C2','#F79DD0','#FFC8E7','#FFB703','#FFCD50','#FFE296']
          },
        ],//系列列表
        
      })
      //添加点击事件，可以点击每个区域，其中params为每个区相关属性，可以根据该属性写各种事件
      myChart.on('click', function (params){
        console.log(params);
      });
    }
  },
}
</script>
<style lang="less" scoped>

</style>