vue中使用echarts柱形折现扇形混合

echarts

我们先来看一下效果图

如果大家不知道怎么在Vue项目中引入可以去看我的另一个博客vue项目导入echarts
如果官方文档看不懂，就可以跟我一样，比如series我不知道这个有什么用，就直接在百度上

大家就可以一个个的看了，不过大部分我都在代码上注释了，上代码

<div style="width: 800px;height: 650px; border: 1px solid red" ref="chart" id="main"></div>

引入echarts别忘了

<script>
import * as echarts from "echarts";

export default {
  name: "echarts",
  data(){
    return {}
  },
mounted() {
    this.init()
},methods:{
    init(){
      const MyChart = echarts.init(document.getElementById("main"));
      MyChart.setOption({
        title: {
          text: '堆叠区域图'
        },
        tooltip: {
          //坐标轴触发
          trigger: 'axis',
          axisPointer: {
            //鼠标移动到柱状图上，显示为交叉线，
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        //菜单的位置，默认上面orient: 'vertical',
        //left: 'center',
       // bottom:'bottom',
        legend: {
          data: ['SA服务', '等号', '机修', '钣金', '喷漆', '总检', '洗车', '滞留']
        },
        toolbox: {
          //工具类
          feature: {
           saveAsImage: {}
           // ,
            // dataZoom: { //数据缩放视图
            //   show: true
            // },
          }
        },
        //网格的配置
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        //x轴
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['10.1', '10.2', '10.3', '10.4', '10.5', '10.6', '10.7']
        }],
        yAxis: [{
          type: 'value'
        }],
        //series表示这一行数据以什么现实,type:pie为扇形图,type:bar柱状图
        series: [{
          name: 'SA服务',
          type: 'line',
          stack: '总量',
          areaStyle: { normal: {} },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
          {
            name: '等号',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '机修',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [150, 232, 101, 154, 190, 330, 410]
          },
          {
            name: '钣金',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 190, 330, 320]
          },
          {
            name: '喷漆',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [310, 312, 301, 334, 390, 330, 320]
          },
          {
            name: '总检',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [320, 332, 311, 334, 390, 330, 320]
          },
          {
            name: '洗车',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [320, 332, 101, 334, 390, 310, 320]
          },
          {
            name: '滞留',
            type: 'pie',
            stack: '总量',
            center:['55%',100],
            radius: 45,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1300]
          }
        ]
      });


    },
  },


}
</script>

数据之类的大家可以自己改哦，大部分我都写了注释，不懂的可以留言哦！！！
还有一张图可以分享给大家，基本上就懂了