【数据挖掘】2021年 Quiz 1-3 整理带答案-CFANZ编程社区

一、新建一个简单的Echarts

1、首先新建一个vue2的项目，项目中安装Echarts

cnpm install echarts --save

2、新建一个ref

<template>
    <div ref="myecharts" id="myecharts"></div>
</template>

3、引入echarts

<script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      let myEcharts = echarts.init(this.$refs.myecharts)
      myEcharts.setOption({
        title: {
          text: 'helloword'
        },
        xAxis: {
          data: [
            {value:'李玉',age:'21'},
            {value:'简隋英',age:'23'},
            {value:'江停',age:'24'},
            {value:'严峫',age:'23'}
          ]
        },
        yAxis: {
  
        },
        series: [
          {
            name:'男主',
            type: 'bar',
            data:[21, 23, 24,23]
          }
        ]
      })
    }
  }
  </script>

4、设置#myecharts的样式

  <style scoped>
  #myecharts {
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
  </style>

5、执行npm run dev显示如下：

二、title标题组件，包含主标题和副标题。

三、tooltip提示框组件

四、 legend图例组件

五、柱状图

1、基本设置

1、新建一个ref

<template>
    <div ref="myecharts" id="myecharts"></div>
</template>

2、引入echarts

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myecharts)
    let xData = ['李玉', '简隋英', '江停', '严峫']
    let yData = [21, 23, 24, 23]
    let option = {
      title: {
        text: '小说人物'
      },
      xAxis: {
        data: xData,
        type:'category',//坐标轴类型，value数据轴，category类目轴
      },
      yAxis: {

      },
      series: [
        {
          name: '男主',
          type: 'bar',//系列类
          data: yData
        }
      ]
    }
    myEcharts.setOption(option)
  }
}
</script>

3、设置#myecharts的样式

  <style scoped>
  #myecharts {
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
  </style>

4、执行npm run dev显示如下：

2、设置最大值和最小值

注意：在 series : [ { markPoint : { ... } } ]

代码截图

代码编写

markPoint: {
  data: [
    {
      type: 'max',
      name: '最大值'
    }, 
    {
      type: 'min',
      name: '最小值'
    }
  ]
}

npm run dev运行效果

3、设置平均值

注意：在 series : [ { markLine : { ... } } ]

代码截图

代码

markLine:{
  data:[
    {
      type:'average',
      name:'平均值'
    }
  ]
},

npm run dev运行效果

六、水平柱状图

1、基本设置

注意：将xAxis和yAxis设置交换即可

代码截图

代码编写

xAxis: {
  type:'value'
},
yAxis: {
  data: xData,
  type: 'category',//坐标轴类型，value数据轴，category类目轴
},

npm run dev运行效果

2、设置轴的宽度

注意：series : [ { barWidth : ... } ]

代码截图

代码编写

barWidth:20,

npm run dev运行效果

3、设置整体轴的颜色

注意：series : [ { color : ... } ]

代码截图

代码编写

color:'green',

npm run dev运行效果

4、单独设置每个轴的颜色

注意： series : [ { itemStyle : normal : { color : function (params) {...} } } ]

代码截图

代码编写

itemStyle:{
  normal:{
    color:function(params){
      let colorList = [
        'red',
        'green',
        'pink',
        'yellow'
      ]
      return colorList[params.dataIndex]
    }
  }
},

npm run dev运行效果

七、饼状图

1、基本设置

注意：新建一个基本的饼图

新建一个ref

代码：

<div ref="bar" id="bar"></div>

设置id：bar的style，设置宽高不然不显示

代码：

#bar{
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

引入echarts

代码：

import * as echarts from 'echarts';

在mounted里进行各种配置

代码：

 mounted() {
        let myEcharts = echarts.init(this.$refs.bar)
        let data = [
            {value:33,name:'香蕉'},
            {value:31,name:'苹果'},
            {value:32,name:'葡萄'},
            {value:22,name:'荔枝'}
        ]
        let option = {
            title: {
                text: '饼状图',
                left: 'center'
            },
            series:[
                {
                    name: '统计',
                    type: 'pie',
                    data
                }
            ]
        }
        myEcharts.setOption(option)
    }

执行npm run dev

2、加一个图例

注意：legend:{}

代码：

legend:{},

执行npm run dev

3、设置纵向图例

注意：legend : { ... },

代码：

legend:{
    left:'left',
    orient: 'verical'
},

执行npm run dev

八、环形图

1、环形图基本配置

注意：series [ { radius : [ '' " ,'' " ] } ]

//设置饼图的半径，一项为内半径，第二项为外半径

代码：

//设置饼图的半径，一项为内半径，第二项为外半径
radius:['40%','70%'],

执行npm run dev

2、隐藏文本标签

注意：series [ { label : { show: false} } ]

代码：

label:{
    show: false//默认值是true
}

执行npm run dev

3、调整文本提示信息的位置

代码：

label: {
    show: true,//默认值是true
    //  outsize：外展示，inside内展示，center中心展示
    position:'inside',
}

outsize：外展示

inside内展示

center中心展示（指向哪一个显示哪一个）

九、兰丁格尔玫瑰图

1、基本设置

注意：series [ { roseType : 'area' } ]

代码：

roseType: 'area',

执行npm run dev

2、设置图形阴影效果

注意：series [ { itemStyle : { ... } } ]

代码：

itemStyle:{
    shadowBlur: 200,
    shadowColor: '#000'
}

执行npm run dev

3、设置每块不同颜色

注意：在data里加itemstyle.normal.color

代码：

let data = [
    { value: 33, name: '香蕉', itemStyle: { normal: { color: 'red' } } },
    { value: 31, name: '苹果', itemStyle: { normal: { color: 'blue' } } },
    { value: 32, name: '葡萄', itemStyle: { normal: { color: 'yellow' } } },
    { value: 22, name: '荔枝', itemStyle: { normal: { color: 'green' } } }
]

执行npm run dev

十、折线图

1、基本设置

注意：新建一个基本的折线图

新建一个ref

代码：

<div ref="line" id="line"></div>

设置id：line的style，设置宽高不然不显示

代码：

#line {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

引入echarts

代码：

import * as echarts from 'echarts';

在mounted里进行各种配置

代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.line)
        let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']
        let data = [130, 25, 30, 45, 100]
        let option = {
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'line',
                    data
                }
            ]
        }
        myEcharts.setOption(option)
    }

执行npm run dev

2、设置折线的平滑过度

注意：series [ { smooth: true } ]

代码：

smooth: true

执行npm run dev

3、设置曲面下方颜色填充

注意：series [ { areaStyle:{} } ]

代码：

areaStyle:{}

执行npm run dev

4、设置最大值最小值

注意：series [ { markPoint:{} } ]

代码：

markPoint: {
    data: [
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
    ]
}

执行npm run dev

5、设置平均值

注意：series [ { markLine:{} } ]

代码：

markLine: {
    data: [
        { type: 'average', name: '平均值' }
    ]
}

执行npm run dev

十一、多条折线图的设置

1、基本设置

注意：新建一个基本的折线图

新建一个ref

代码：

<div ref="line" id="line"></div>

设置id：line的style，设置宽高不然不显示

代码：

#line {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

引入echarts

代码：

import * as echarts from 'echarts';

在mounted里进行各种配置

代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.line)
        let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']

        let dataA = [130, 25, 30, 45, 100]
        let dataB = [12, 54, 87, 56, 123]
        let dataC = [34, 44, 65, 123, 23]
        let dataD = [12, 65, 98, 121, 132]

        let option = {
            title:{
                text:'销量'
            },
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'香蕉',
                    type:'line',
                    stack:'num',
                    data:dataA
                },
                {
                    name:'苹果',
                    type:'line',
                    stack:'num',
                    data:dataB
                },
                {
                    name:'荔枝',
                    type:'line',
                    stack:'num',
                    data:dataC
                },
                {
                    name:'芒果',
                    type:'line',
                    stack:'num',
                    data:dataD
                },
            ]
        }
        myEcharts.setOption(option)
    }

执行npm run dev

2、设置多个曲面下方的颜色填充

注意：在每一个里面设置areaStyle:{}

代码：

series: [
    {
        name:'香蕉',
        type:'line',
        stack:'num',
        data:dataA,
        areaStyle:{}
    },
    {
        name:'苹果',
        type:'line',
        stack:'num',
        data:dataB,
        areaStyle:{}
    },
    {
        name:'荔枝',
        type:'line',
        stack:'num',
        data:dataC,
        areaStyle:{}
    },
    {
        name:'芒果',
        type:'line',
        stack:'num',
        data:dataD,
        areaStyle:{}
    },
]

执行npm run dev

3、设置单个高亮效果

注意：如果每一个都需要设置高亮效果，就将每一个系列都设置上

代码：

emphasis: {
    focus: 'series'
}

执行npm run dev

十二、散点图

1、基本设置

注意：新建一个基本的散点图

新建一个ref

代码：

<div ref="scatter" id="scatter"></div>

设置id：scatter的style，设置宽高不然不显示

代码：

#scatter {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

引入echarts

代码：

import * as echarts from 'echarts';

在mounted里进行各种配置

代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.scatter)
        let option = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    data: [
                        [18.2, 6.83],
                        [6.32, 5.63],
                        [17.0, 6.55],
                        [8.18, 5.12],
                        [15.0, 7.56]
                    ],
                    type:'scatter',//散点图
                }

            ]
        }
        myEcharts.setOption(option)
    }

执行npm run dev

2、设置散点图大小

注意：series [ { symbolSize : 数值 } ]

代码：

symbolSize: 50,

执行npm run dev

3、设置图点整体颜色

注意：series [ { color :' 色值' } ]

代码：

color:'red'

执行npm run dev

4、设置图点渐变颜色

注意：series [ { color :' 色值' } ]

代码：

color: {
    type: 'linear',//线性渐变
    x: 0,//相当于图形包围盒中的百分比
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
        {
            offset: 0,
            color: 'green'
        }, {
            offset: 1,
            color: 'rgba(255,233,9)'
        }
    ]
}

执行npm run dev

5、鼠标移入高亮

注意：series [ { emphasis : ... } ]

代码：

    emphasis: {
        itemStyle: {
            borderColor: 'rgba(100,200,50,0.5)',
            borderWidth: 30
        }
    },

执行npm run dev

6、鼠标移入时显示提示框

注意：tooltip:{},

代码：

tooltip:{},

执行npm run dev

十三、grid属性

1、设置图形与外框的间距

注意：grid : { ... }

代码：

grid:{
    left:'70px',
    right:'20%',
    top:'30px',
    bottom:'20%'
},

执行npm run dev

2、图形边框线条颜色加深

注意：grid : { show : true }

代码：

show:true,

执行npm run dev

3、设置图形容器背景颜色

注意：grid : { backgroundColor : ' 色值 ', }

// 设置背景色时show:true，不然设置项不显示

代码：

grid: {
    show:true,
    backgroundColor:'yellow',
}

执行npm run dev

3、设置图形容器边框颜色

注意：grid : { borderColor : ' 色值 ', }

// 设置背景色时show:true，不然设置项不显示

代码：

borderColor:'red',

执行npm run dev

十四、k线图

1、基本设置

注意：新建一个基本的k线图

新建一个ref

代码：

<div ref="candlestick" id="candlestick"></div>

设置id：candlestick的style，设置宽高不然不显示

代码：

#candlestick {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

引入echarts

代码：

import * as echarts from 'echarts';

在mounted里进行各种配置

代码：

export default {
    mounted() {
        let myEcharts = echarts.init(this.$refs.candlestick)
        let option = {
            xAxis: {
                data: ['香蕉', '苹果', '葡萄', '荔枝', '芒果']
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: [
                        [20,34,10,38],
                        [40,35,30,50],
                        [31,38,33,44],
                        [38,15,5,42]
                    ]
                }
            ]
        }
        myEcharts.setOption(option)
    }
}

执行npm run dev

2、设置提示内容

注意：tooltip : { ... }

代码：

tooltip: {
    trgger: 'axis',
    axisPointer: {
        type: 'cross'
    }
},

执行npm run dev

3、设置上涨颜色和下跌颜色

注意：上涨：series [ { itemStyle : { color : ' 色值 ' } } ]

下跌：series [ { itemStyle : { color0 : ' 色值 ' } } ]

代码：

itemStyle: {
    color: 'blue',
    color0: 'yellow'
},

执行npm run dev

4、设置上涨颜色和下跌边框颜色

注意：上涨：series [ { itemStyle : { borderColor : ' 色值 ' } } ]

下跌：series [ { itemStyle : { borderColor0 : ' 色值 ' } } ]

代码：

itemStyle: {
    borderColor:'#000',
    borderColor0:'#000',
},

执行npm run dev

5、设置最大值最小值平均值

注意：series [ { markPoint : { data : [ ... ] } } ]

代码：

markPoint: {
    data: [
        {
            name: '最大值',
            type: 'max',
            valueDim: 'highest'//在那个维度上设置最发值或最小值
        },
        {
            name: '最小值',
            type: 'min',
            valueDim: 'lowest'
        },
        {
            name: '平均值',
            type: 'average',
            valueDim: 'close'
        }
    ]
},

执行npm run dev

【数据挖掘】2021年 Quiz 1-3 整理 带答案

一、新建一个简单的Echarts

二、title标题组件，包含主标题和副标题。

三、tooltip提示框组件

四、 legend图例组件

五、柱状图

1、基本设置

2、设置最大值和最小值

3、设置平均值

六、水平柱状图

1、基本设置

2、设置轴的宽度

3、设置整体轴的颜色

4、单独设置每个轴的颜色

七、饼状图

1、 基本设置

2、加一个图例

3、设置纵向图例

八、环形图

1、环形图基本配置

2、隐藏文本标签

3、调整文本提示信息的位置

九、兰丁格尔玫瑰图

1、基本设置

2、设置图形阴影效果

3、设置每块不同颜色

十、折线图

1、基本设置

2、设置折线的平滑过度

3、设置曲面下方颜色填充

4、设置最大值最小值

5、设置平均值

十一、多条折线图的设置

1、基本设置

2、设置多个曲面下方的颜色填充

3、设置单个高亮效果

十二、散点图

1、基本设置

2、设置散点图大小

3、设置图点整体颜色

4、 设置图点渐变颜色

5、鼠标移入高亮

6、鼠标移入时显示提示框

十三、grid属性

1、设置图形与外框的间距

2、图形边框线条颜色加深

3、设置图形容器背景颜色

3、 设置图形容器边框颜色

十四、k线图

1、基本设置

2、设置提示内容

3、设置上涨颜色和下跌颜色

4、设置上涨颜色和下跌边框颜色

5、设置最大值最小值 平均值

【数据挖掘】2021年 Quiz 1-3 整理带答案

1、基本设置

4、设置图点渐变颜色

3、设置图形容器边框颜色

5、设置最大值最小值平均值