Echarts Vue-折线图/柱状图/饼图

以上结果是利用Echarts5.js版本将数据图形化,这里采用了三个简单图表(折线图,柱状图,饼图).

但当前这个案例将三个图表的常用配置项都做了注释,方便读者了解,读者可以直接复制到app.vue组件就可以查看页面的显示了.

作者是跟着pink老师做的这几个图,老师讲的通俗易懂,强力推荐,下附传送门:

黑马前端pink老师echarts课程:

01-直播课内容介绍_哔哩哔哩_bilibili01-直播课内容介绍是ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-pink老师直播课更新完毕）的第1集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1v7411R7mp?p=1&vd_source=dd482ed3e8ac30e484e3afc413b040ebecharts官方文档:Echarts-API-文档Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/api.html#echarts

ppchart社区实例:PPChart - 让图表更简单让图表更简单。PPChart 提供 Echarts 收录、图表制作等服务http://www.ppchart.com/#/

<template>
  <div>
    <div><a href="javascript:;" ref="2021" @click="changeData('2021')">2021</a>&nbsp
      <a href="javascript:;" ref="2022" @click="changeData('2022')">2022</a></div>
    <div id="app">

      <div ref="echarts1" class="echarts">
      </div>
      <div ref="echarts2" class="echarts"></div>
      <div ref="echarts3" class="echarts"></div>
      <div ref="echarts4" class="echarts"></div>
      <div ref="echarts5" class="echarts"></div>
      <div ref="echarts6" class="echarts"></div>
      <div ref="echarts7" class="echarts"></div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'App',
  data: () => {
    return {
      option1: {},
      myChart1: {},
      option1Data: [{
        data: [[5, 20, 36, 10, 10, 20], [50, 100, 50, 140, 101, 220]]
      }, {
        data: [[8, 80, 24, 64, 30, 28], [80, 120, 154, 164, 50, 240]]
      }],
    }
  },
  mounted: function () {
    let $this = this;
    /*
    * echarts.init(dom)
    * option={
    * color:['',''],
    * title:{text:''},
    * tooltip:{trigger:''},
    * legend:{data:[]},
    * toolbox:{feature:{}},
    * grid:{
    * left:'',
    * bottom:'',
    * containLabel:true
    * },
    * xAxis:{
    * type:'category',
    * data:[],
    * //边界间隙
    * boundaryGap:true
    * },
    * yAxis:{
    * type:'ture'
    * },
    * series:[{
    * name:'',
    * type:'',
    * data:[],
    * stack:''},{}]
    * }
    * */
// 基于准备好的dom，初始化echarts实例
    $this.myChart1 = echarts.init($this["$refs"]["echarts1"]);
// 绘制图表
    $this.option1 = {
      //设置图形的颜色组
      // color:["red","green"],
      //标题组件
      title: {
        text: '折线图'
      },
      //提示框组件
      tooltip: {
        //触发方式 : 显示轴线axis上所有的item 显示鼠标悬浮单独的item
        trigger: 'axis'
      },
      //图例组件
      legend: {
        //当series有name时,这里的data可以不用写
        // data: ["销量", "利润"],
        selected: {
          "销量2": false
        },
        textStyle: {
          color: 'purple',
          fontSize: 12
        },
        right: "10%"
      },
      //工具箱组件
      toolbox: {
        //另存为图片等功能
        feature: {
          saveAsImage: {}
        }
      },
      //网格配置 控制图表大小
      grid: {
        left: '0%',//距离dom元素的左侧距离
        right: '4%',//距离dom元素的右侧距离
        bottom: '0%',//距离dom元素的底部距离
        //是否包含标签
        containLabel: true,//true显示刻度
        show: true,//显示边框
        borderColor: '#012fa'//边框颜色
      },
      //x轴配置
      xAxis: {
        //显示坐标轴类型:类目
        type: 'category',
        //是否让x轴上的第一个坐标点和最后一个坐标点贴近于图表的侧边
        boundaryGap: false,
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: 'purple',
            fontSize: 12
          }
        }
      },
      //y轴配置
      yAxis: {
        //显示对应类目的结果值
        type: "value",
        //是否显示y轴轴线,默认伟false
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: 'purple',
            fontSize: 12
          }
        }
      },
      //系列
      series: [
        {
          name: '销量1',
          type: 'line',
          data: $this.option1Data[1].data[0],
          stack: '销量', //同名下产生数据堆叠 比如当前第一个值是5
          smooth: true,//显示带有弧度7
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(1,132,213,0.4)"
                  },//开始颜色
                  {
                    offset: 0.8,
                    color: "rgba(1,132,213,0.1)"
                  }//结束颜色
                ], false
            ),
            shadowColor: "rgba(0,0,0,0.1)"
          },
          lineStyle: {
            color: "#0184d5",
            width: 2
          },
          symbol: 'circle',
          symbolSize: 8,
          showSymbol: false,
          itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221,220,107,0.2)",
            borderWidth: 5
          }
        },
        {
          name: '销量2',
          type: 'line',
          data: $this.option1Data[1].data[1],
          stack: '销量', //在第二条线的第一个值就会因为前面的5而叠加成55
          smooth: true,
          lineStyle: {
            color: "#00d887",
            width: 2
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0,216,135,0.4)"
                  },//开始颜色
                  {
                    offset: 1,
                    color: "rgba(0,216,135,0.1)"
                  }//结束颜色
                ], false
            ),
            shadowColor: "rgba(0,0,0,0.1)"
          },
          symbol: 'circle',
          symbolSize: 8,
          showSymbol: false,
          itemStyle: {
            color: "#00d887",
            borderColor: "rgba(221,220,107,0.2)",
            borderWidth: 5
          }
        },

      ]
    };
    $this.myChart1.setOption($this.option1);
// 基于准备好的dom，初始化echarts实例
    let myChart2 = echarts.init($this["$refs"]["echarts2"]);
// 绘制图表
    myChart2.setOption({
      //标题组件
      title: {
        right: 'center',
        text: '混合图',
        textStyle: {
          color: "white",
          fontWeight: 400,
        }
      },
      //提示框组件
      tooltip: {
        //触发方式 : 显示轴线axis上所有的item 显示鼠标悬浮单独的item
        trigger: 'axis',
        axisPointer: {
          type: 'none' // line/shadow/none
        }
      },
      //工具箱组件
      toolbox: {
        //另存为图片等功能
        feature: {
          saveAsImage: {}
        }
      },
      //网格配置 控制图表大小
      grid: {
        left: '0%',//距离dom元素的左侧距离
        right: '12%',//距离dom元素的右侧距离
        bottom: '0%',//距离dom元素的底部距离
        //是否包含标签
        containLabel: true,//true显示刻度,

      },
      //y轴配置
      yAxis: [{
        //显示坐标轴类型:类目
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        //坐标轴的标签配置
        axisLabel: {
          color: 'red',
          fontSize: '12'
        },
        //取消刻度
        axisTick: {
          show: false
        },
        //取消轴线
        axisLine: {
          show: false
        },
        //方向翻转,原本设定第一个图形是在最下面的
        inverse: true
      }, {
        data: [52, 200, 361, 104, 105, 209],
        //取消刻度
        axisTick: {
          show: false
        },
        //取消轴线
        axisLine: {
          show: false
        },
        //坐标轴的标签配置
        axisLabel: {
          color: 'white',
          fontSize: '10'
        },
        //方向翻转,原本设定第一个图形是在最下面的
        inverse: true
      }],
      //x轴配置
      xAxis: {
        //显示对应类目的结果值
        type: "value",
        name: "销量",
        nameLocation: "end",
        //坐标轴的标签配置
        axisLabel: {
          color: 'red',
          fontSize: '12'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.5)',
            width: '1',
            type: 'solid'
          }
        },
        //分割线配置
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.5)',
            width: 2,
            type: 'dotted'
          }
        }

      },
      //系列
      series: [
        {
          name: '条',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          yAxisIndex: 0,
          //修改柱子宽度
          barWidth: '10',
          itemStyle: {
            //修改柱子圆角
            borderRadius: 20,
            color: params => {
              var num = ["red", "blue", "green", "purple", "yellow", "cyan"].length
              // 取余的意义时当图形量大于颜色组的长度,则循环调色
              return ["red", "blue", "green", "purple", "yellow", "cyan"][params.dataIndex % num]
            }
          },
          //柱子之间的距离
          barCategoryGap: 50,
          //图形上的文本标签
          label: {
            show: true,
            position: "inside",
            formatter: "{c}%",
            fontSize: 8
          },
        },
        {
          name: '框',
          type: 'bar',
          data: [100, 100, 100, 100, 100, 100],
          yAxisIndex: 1,
          //修改柱子宽度
          barWidth: '11',
          itemStyle: {
            //修改柱子圆角
            borderRadius: 20,
            //取消柱子内的颜色
            color: "none",
            //增加柱子边框的颜色
            borderColor: "green",
          },

        }
      ]
    });

    let myChart3 = echarts.init($this["$refs"].echarts3);
    myChart3.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b}: {c}({d}%)'
      },
      legend: {
        bottom: '20%',
        itemWidth:10,
        itemHeight:10,
        textStyle:{
          color:"rgba(139,69,69,0.5)",
          fontSize:8
        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['2%', '30%'],
          center: ['50%', '40%'],
          //玫瑰图 以area面积或radius半径来表示
          roseType: 'radius',
          //是否开启标签的溢出隐藏
          avoidLabelOverlap: false,
          label: {
            show: true,
            // position: 'center',
            fontSize:10
          },
          labelLine: {
            show: true,
            length:6,
            length2:8
          },
          data: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
          ]
        }
      ]
    });



    //让图表跟随屏幕自动去自适应(当屏幕放大缩小时,图表的大小随之变化)
    window.addEventListener('resize', function () {
      $this.myChart1.resize();
      myChart2.resize();
      myChart3.resize();
    })
  },
  methods: {
    changeData: function (year) {
      if (year == '2021') {
        this.option1.series[0].data = this.option1Data[1].data[0]
        this.option1.series[1].data = this.option1Data[1].data[1]
        this.myChart1.setOption(this.option1);
      } else {
        this.option1.series[0].data = this.option1Data[0].data[0]
        this.option1.series[1].data = this.option1Data[0].data[1]
        this.myChart1.setOption(this.option1);
      }
    }
  }
}
</script>

<style scoped lang="less">
#app {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  .echarts {
    width: 600px;
    height: 600px;
    background-color: pink;
    margin: 10px;
  }
}

a {
  color: black;
  text-decoration: none;
}

</style>