管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-01-16 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf
src/components/echart12.vue
@@ -8,7 +8,7 @@
export default {
  data() {
    //这里存放数据
    return { myChart };
    return { myChart: null };
  },
  //方法集合
  methods: {
@@ -131,7 +131,7 @@
        title: {
          // show: false,
          text: '数据及服务提交',
          // x: "4%",
          top: '15',
          textStyle: {
            color: '#fff',
            // fontSize: "22",
@@ -141,9 +141,9 @@
          //   fontSize: "16",
          // },
        },
        // 图表的位置
        //  图表的位置
        // grid: {
        //   position: "center",
        //   top:"4%"
        // },
        color: colorArr,
@@ -151,7 +151,7 @@
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 0,
          top: 10,
          right: 0,
          itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
@@ -169,10 +169,10 @@
              fontSize: 12,
            },
          },
          radius: 120,
          radius: 80,
          nameGap: 2, // 图中工艺等字距离图的距离
          splitNumber: 4, // 网格线的个数
          // center: ["45%", "45%"], // 图的位置
          center: ["50%", "65%"], // 图的位置
          indicator: indicator,
          splitArea: {
@@ -186,12 +186,12 @@
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#153269',
              color: '#FFF',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#113865', // 分隔线颜色
              color: '#FFF', // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
@@ -227,10 +227,12 @@
//@import url(); 引入公共css类
.systemMonitoring_box {
  padding: 20px;
  width: 100%;
  height: 100%;
  #gauge_chart1 {
    width: 100%;
    height: 100%;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
}
</style>