eCharts-CSDN博客

本文链接：https://blog.csdn.net/jdrunk/article/details/103470383

  <ve-histogram :data="chartData"></ve-histogram>
===js===
import VeHistogram from 'v-charts/lib/histogram.common'
components: {
    VeHistogram,
  },
  data() {
    return {
      chartData: {
          columns: ['日期', '参加上课的学生人数', '完成上课签到的学生人数'],
          rows: [
            { '日期': '2020-8-4', '参加上课的学生人数': 1393, '完成上课签到的学生人数': 1093 },
            { '日期': '2020-8-5', '参加上课的学生人数': 3530, '完成上课签到的学生人数': 3230 },
            { '日期': '2020-8-6', '参加上课的学生人数': 2923, '完成上课签到的学生人数': 2623 },
            { '日期': '2020-8-7', '参加上课的学生人数': 1723, '完成上课签到的学生人数': 1423 },
            { '日期': '2020-8-8', '参加上课的学生人数': 3792, '完成上课签到的学生人数': 3492 },
            { '日期': '2020-8-9', '参加上课的学生人数': 4593, '完成上课签到的学生人数': 4293 },
            { '日期': '2020-8-10', '参加上课的学生人数': 1393, '完成上课签到的学生人数': 1093 },
            { '日期': '2020-8-11', '参加上课的学生人数': 3530, '完成上课签到的学生人数': 3230 },
            { '日期': '2020-8-12', '参加上课的学生人数': 2923, '完成上课签到的学生人数': 2623 },
            { '日期': '2020-8-13', '参加上课的学生人数': 1723, '完成上课签到的学生人数': 1423 },
            { '日期': '2020-8-14', '参加上课的学生人数': 3792, '完成上课签到的学生人数': 3492 },
            { '日期': '2020-8-15', '参加上课的学生人数': 4593, '完成上课签到的学生人数': 4293 }
          ]
        }
    }

npm安装eCharts npm install echarts -S
在需要用图表的地方引入import echarts from 'echarts'
或在main.js中import echarts from 'echarts'和 Vue.prototype.$echarts = echarts
属性：
type:图形类型
name：系列名称，用于tooltip的显示，legend的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
xAxisIndex:使用x轴的index,在单个图表实例中存在多个x轴的时候用
yAxisIndex:使用y轴的index,在单个图表实例中存在多个y轴的时候用
symbol:标记的图形，ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者dataURI。
URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'
symbolSize:标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10

x轴字体过多时，显示不全
解决方法：

 axisLabel: {
     interval:0,
     rotate:50,    //旋转一定角度   
    }

条形图图形颜色不同
设置

 itemStyle: {
        normal: {
          color: function(params){
              var colorList=[
                  '#55A8FD','#5FDAC7','#FA7D7D','#AEB3B8','#92C789','#6A6A6A'
              ]
              return colorList[params.dataIndex]
          }       
      },

在这里插入图片描述
折线图和柱形图

<template>
  <div class="HelloWorld">
    <!-- 条形图和折线图 -->
    <div class="title">我的销售量</div>
    <div id="myLine">
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return{ }
  },
  //echarts初始化应在钩子函数mounted()中，挂载之后调用
  mounted(){
    this.draw();
  },
  methods: {
    //折线图和柱状图
    draw(){                      
      let myLine = this.$echarts.init(document.getElementById('myLine'))                      
      var option = {        
        title:{
          text:'销售量',
          //全局字体样式
          textStyle:{
            // color:'#878787',
            // fontSize:'20px'
            fontWeight:400
          }
        },
        //提示框组件
        tooltip: {
          //show 是否显示提示框组件，包括提示框浮层和 axisPointer
          show:true,
          //trigger 触发类型，item数据项图形触发，主要在散点图、饼图等无类目轴的图表中使用，axis坐标轴触发，none什么都不触发
          trigger: 'axis'   
        },
        //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
        toolbox: {
          show : true,   //显示
          //柱形图和折线图切换
          feature : {
            magicType : {show: true, type: ['line', 'bar']},
          },  
          right: '6%',   //离右边的距离
        },
        //图例组件
        legend: {
          data:[{
            name:'销量',
            left:'25%',
            top:'12px',
            itemWidth:10,  //图例图标的宽
            itemHeight:10,   //图例图标的高
            textStyle:{
              color:'#3a6186',
              fontSize:'20px'
            }},{
              name:'进货量',
              left:'30%',
              top:'12px',
              itemWidth:10,  //图例图标的宽
              itemHeight:10,   //图例图标的高
              textStyle:{
                color:'skyblue',
                fontSize:'20px'
              }
            }]         
        },
        //横坐标
        xAxis: {
          type:'category',
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
          splitLine: {show: false},//去除网格分割线
          // splitArea: {show: true},//保留网格区域
          axisLine: {//坐标线
            lineStyle: {
              type: 'solid',
              color: '#d8d8d8',//轴线的颜色
              width:'1'//坐标线的宽度
            }
          },
          axisTick: {//刻度
            show: false//不显示刻度线
          },
          axisLabel: {
            textStyle: {
              color: '#878787',//坐标值的具体的颜色
            }
          },
          // splitLine: {
          //   show: false//去掉分割线
          // }
        },
        //纵坐标
        yAxis: {
          name: '单位：件',//轴的名字，默认位置在y轴上方显示,也可不写
          max: 100,//最大刻度
          type: 'value',
          axisLine: {     //y轴线
            show: true
          },
          axisTick: {    //y轴上的刻度
            show: true
          },
          axisLabel: {
            textStyle: {
              color: '#878787',//坐标值得具体的颜色
            }
          },
          minInterval: 5,//标值的最小间隔
          splitLine: {
            lineStyle: {
              color: ['#f6f6f6'],//分割线的颜色
            }
          }
        },
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          itemStyle: {
            normal: {
              color: '#FD6B71',//设置柱子颜色
              label: {
                show: true,//柱子上显示值
                position: 'top',//值在柱子上方显示
                textStyle: {
                  color: '#FD6B71'//值得颜色
                }
              }
            }
          },
          barWidth: 15//设置柱子宽度，单位为px
        },{
          name: '进货量',
          type: 'bar',
          data: [15, 25, 65, 100, 20, 10],
          itemStyle: {
            normal: {
              color: 'skyblue',//设置柱子颜色
              label: {
                show: true,//柱子上显示值
                position: 'top',//值在柱子上方显示
                textStyle: {
                  color: '#FD6B71'//值得颜色
                }
              }
            }
          },
          barWidth: 15//设置柱子宽度，单位为px
        }]      
      } 
      // 防止越界，重绘canvas ,解决掉屏幕缩小，图表不会随之适应的缩小的方法，
      //原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas  
      //resize事件:当调整浏览器窗口大小时会触发此事件。                   
      window.onresize = myLine.resize;
      //设置option
      myLine.setOption(option);
    }    
  }  
}
</script>
<style lang="less" scoped>
.HelloWorld{
  .title{
    font-size: 20px;
    font-weight: 600;
    color: blue;
    margin-bottom: 20px;
  }
  #myLine{
    width: 600px;
    height: 400px;
  }
  #Line{
    width: 600px;
    height: 400px;
  }
}
</style>

在这里插入图片描述
防止越界，重绘canvas ,解决掉屏幕缩小，图表不会随之适应的缩小的方法，原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas
resize事件:当调整浏览器窗口大小时会触发此事件。window.onresize = myLine.resize;

折线图

<template>
    <div class="lineCharts">
      <p class="title">折线图</p>
      <div id="myLineOne">          
      </div> 
    </div> 
</template>
<script>
import echarts from 'echarts'
export default {
    name:'lineCharts',
   data(){
       return{ }
    },
    mounted(){
        this.draw('myLineOne');
    },
    methods:{
      draw(id){
          this.charts=echarts.init(document.getElementById(id));
          this.charts.setOption({
              title:{
                text:'日温差',
                //全局字体样式
                 textStyle:{                
                    fontWeight:400
                 }
                },
                //提示框组件
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                   data:[{
                    name:'日温差',
                    left:'25%',
                    top:'12px',
                    textStyle:{
                    color:'#3a6186',
                    fontSize:'20px'
                    }
                    },{
                    name:'前一天温度',
                    left:'30%',
                    top:'12px',
                    textStyle:{
                        color:'skyblue',
                        fontSize:'20px'
                    }
                    }]    
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {show: true, type: ['line']}
                    }
                },
                xAxis: {
                    type: 'category',
                    //坐标轴两边留白
                    boundaryGap: true,
                    data: ["2:00","4:00","6:00","8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00"]                
                },
                yAxis: {
                    name: '单位：摄氏度',//轴的名字，默认位置在y轴上方显示,也可不写
                    max: 25,//最大刻度
                    type: 'value',
                    axisLine: {
                        show: true
                    },
                    axisTick: {//刻度
                        show: true
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#878787',//坐标值得具体的颜色
                        }
                    },
                    minInterval:1,//标值的最小间隔
                    splitLine: {
                        lineStyle: {
                            color: ['#f6f6f6'],//分割线的颜色
                        }
                    }
                },
                series: [{
                    name: '日温差',
                    type: 'line',
                    data: [2,3,2,4,11,17,16,12,10,7,5,1],
                    itemStyle: {
                        normal: {
                            color: '#FD6B71',//设置柱子颜色
                            label: {
                                show: true,//柱子上显示值
                                position: 'top',//值在柱子上方显示
                                textStyle: {
                                    color: '#FD6B71'//值得颜色
                                }
                            }
                         }
                    }  
                },{
                    name: '前一天温度',
                    type: 'line',
                    data: [1,4,3,4,16,21,22,10,10,5,3,1],
                    itemStyle: {
                        normal: {
                            color: 'skyblue',
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#FD6B71'
                                }
                            }
                         }
                    }  
                } ]
          })
      }  
    } 
}
</script>
<style lang="less" scoped>
.lineCharts{

    .title{
        font-size: 20px;
        font-weight: 600;
        color: blue;
        margin-bottom: 20px;
    }

    #myLineOne{
        width: 600px;
        height: 400px;
    }
}
</style>

在这里插入图片描述
散点图

<template>
   <div class="scatter_diagram">
       <p class="title">散点图</p>
       <div id="scatter">

       </div>
   </div>
</template>
<script>
import echarts from 'echarts'
export default {
   data(){
       return{
           
       }
   },
   mounted(){
       this.draw(); 
   },
   methods:{
       draw(){
           let myChart = echarts.init(document.getElementById('scatter'));
            myChart.setOption({
                xAxis: {
                   name:'单位：米'
                },
                yAxis: {
                    name:'单位：米'
                },
                series: [{
                    symbol:'rect',    //标记的形状
                    // symbol:url('./images/star.jpg'),
                    symbolSize: 20,   //标记的大小（气泡的大小）
                    data: [
                        [10.0, 8.04],
                        [8.0, 6.95],
                        [13.0, 7.58],
                        [9.0, 8.81],
                        [11.0, 8.33],
                        [14.0, 9.96],
                        [6.0, 7.24],
                        [4.0, 4.26],
                        [12.0, 10.84],
                        [7.0, 4.82],
                        [5.0, 5.68]
                    ],
                    type: 'scatter'   //类型为散点图
                }]
            })
        }
   }
}
</script>
<style lang="less" scoped>
.scatter_diagram{

    .title{
        font-size: 20px;
        font-weight: 600;
        color: blue;
        margin-bottom: 20px;
    }

    #scatter{
        width: 620px;
        height: 400px;
    }
}
</style>

在这里插入图片描述
饼图

<template>
    <div class="pie">
        <p class="title">饼图</p>
        <div id="myPie">
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    data(){
        return{ }
    },
   mounted(){
       this.draw();
   },
   methods:{
       draw(){
           //基于准备好的dom,初始化echarts实例
           let myChart = echarts.init(document.getElementById('myPie'));
           //绘制图表
           myChart.setOption({
            title : {
                text: '江西**大学',    //主标题
                subtext: '问卷——上课是否经常玩手机',    //副标题
                x:'center',    //x轴方向对齐方式
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                bottom: 'bottom',
                data: ['基本都在玩手机','经常','一般','偶尔','基本不玩']
            },
          series : [
              {
                  name: '问卷',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'基本都在玩手机'},
                      {value:310, name:'经常'},
                      {value:234, name:'一般'},
                      {value:135, name:'偶尔'},
                      {value:148, name:'基本不玩'}
                  ],
                  //图形的颜色，默认从全局调色盘 option.color 获取颜色
                  itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
              }
          ]
           })
       }
   } 
}
</script>
<style lang="less" scoped>
.pie{

    .title{
    font-size: 20px;
    font-weight: 600;
    color: blue;
    margin-bottom: 20px;
    }

    #myPie{
        width: 600px;
        height: 400px;
    }
}
</style>

在这里插入图片描述
漏斗图

<template>
    <div class="funnels">
        <p>漏斗图</p>
        <div id="myFunnels"></div>
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    data(){
        return{

        }
    },
     mounted(){
       this.draw();
   },
   methods:{
       draw(){
           //基于准备好的dom,初始化echarts实例
           let myChart = echarts.init(document.getElementById('myFunnels'));
           //绘制图表
           myChart.setOption({
            title: {
                text: '漏斗图',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['展现','点击','访问','咨询','订单']
            },

            series: [
                {
                    data: [
                        {value: 60, name: '访问'},
                        {value: 40, name: '咨询'},
                        {value: 20, name: '订单'},
                        {value: 80, name: '点击'},
                        {value: 100, name: '展现'}
                    ],
                    name:'漏斗图',
                    type:'funnel',
                    left: '10%',
                    top: 60,
                    //x2: 80,
                    bottom: 60,
                    width: '80%',
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    
                }
            ]
           })
       }
   } 
}
</script>
<style >
   #myFunnels{
        width: 600px;
        height: 400px;
    }  
</style>

在这里插入图片描述