echart

haoxuan

2023-12-01 9a664d3cdbcafbfe89e21440172b0cca254483ee

echart

 src/components/cockpitPage/BarChart.vue

@@ -2,13 +2,15 @@
  <div class="bar-chart">
    <ChartTitle name="车间正品率"></ChartTitle>
    <div class="bar-contents">

      <div class="chart" ref="chart"></div>
    </div>
  </div>
</template>

<script>
import ChartTitle from "@/components/cockpitPage/ChartTitle.vue";
//引入echart
import * as echarts from 'echarts'
export default {
  components: {
    ChartTitle,
@@ -20,11 +22,147 @@
    };
  },
  mounted() {

    let chartData={
      datax:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datay:[120, 200, 150, 80, 70, 110, 130]
    }
    this.pieChart('chart',chartData)
  },
  watch: {},
  methods: {
    
    //在职
    pieChart(chartName,data){
          let chartDom = this.$refs[chartName]
          let myChart = echarts.init(chartDom);
          let option;
          if(data){
            option = {
              color:['#618DF8'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'none'
                }
              },
              grid: {
                right: "11%",
                bottom:'21%',
              },
              dataZoom: [
                {
                  type: 'inside',
                  // show: true, //显示滚动条
                  start:0,
                  end: 100,
                  xAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  // handleSize: 8
                },
                {
                  //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
                  type: 'inside',
                  // show: true,
                  // realtime : true,
                  xAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  start: 0,
                  end: 100
                },
              ],
              legend: {
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 35,//间距
                // data:data.legend?[
                //   {
                //     name:data.legend.data[0],
                //     icon: 'roundRect',
                //   },
                // ]:[]
              },
              xAxis: [
                {
                  type: 'category',
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color:'#EAEAEA',
                    }
                  },
                  axisLabel:{
                    rotate:45,
                    margin: 12,
                    show: true,
                    textStyle: {
                      color: '#9B9B9B'
                    },
                  },
                  data: data.datax?data.datax:[],
                }
              ],
              yAxis: [
                {
                  type: '',
                  name: 'yyy',
                  // min: data.yAxis[0].min?data.yAxis.min:0,
                  minInterval: 1,//坐标轴是整数
                  max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//数据最大值加3
                  interval: Math.ceil(eval( `Math.max(${data.datay})`)/5)*5 / 5,
                  position: 'left',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color:'#EAEAEA',
                    }
                  },
                  nameTextStyle:{
                    color:"#9B9B9B",
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      // 使用深浅的间隔色
                      color: '#EAEAEA',
                    }
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#9B9B9B'
                    },
                    formatter: ''
                  }
                }
              ],
              series:[
                {
                  type: '',
                  name: 'y',
                  barWidth: '20%',
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果
                      barBorderRadius:[4, 4, 0, 0],
                    }
                  },
                  data: data.datay,
                }
              ]
            };

            option && myChart.setOption(option);
          }else{
            option={};
            myChart.setOption(option,true);
          }
        },
  },
};
</script>
@@ -39,6 +177,10 @@
    height:calc(100% - 60px);
    border:1px solid #00FFFF;
    box-sizing: border-box;
    .chart{
        width: 100%;
        height:100%;
      }
  }
}
</style>