应用软件开发可视化大屏模板

一.仪表盘，环状图，柱状图，折线图部分（Examples）

1.使用了 Vue ECharts 插件来初始化一个 ECharts 实例，并将其挂载到了 id 为 ‘main’ 的 DOM 元素，同时指定了图表的主题为 ‘chalk’

let myChart = this.$echarts.init(document.getElementById('main'),'chalk');

2.生成图表

a.仪表盘

let option = {
          tooltip: {
            formatter: "{a} <br/>{b} : {c}"
          },
          series: [
            {
              name: "业务指标",
              type: "gauge",
              max:1000,
              detail: { formatter: "{value}" }, // 更改为显示具体数值
              data: [{ value: 500, name: "完成量" ,title: {
                    offsetCenter: ["0%", "80%"]
                  }}], // 更改为您的具体数值
              axisLabel: {
                // 刻度标签。
                show: false // 是否显示标签,默认 true。
              },
              itemStyle: {
                color: "#73fa58"
              },
              pointer: {
                //指针大小
                width: 2
              },
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
                fontSize: 16,
                color: "#73fa58",
                offsetCenter: [0, "30%"]
              },
            },
            
          ]
        };

 b.环状图

let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "middle",
            style: {
              text: "总能耗\n500 kWh", // 替换为您的实际总能耗数值和单位
              textAlign: "center",
              fill: "#333",
              fontSize: 20
            }
          }
        ],
        series: [
          {
            name: "能耗分布",
            type: "pie",
            radius: ["50%", "70%"],
            data: [
              { value: 335, name: "空调", itemStyle: { color: "#5793f3" } },
              { value: 310, name: "照明", itemStyle: { color: "#d14a61" } },
              { value: 234, name: "电梯", itemStyle: { color: "#675bba" } },
              { value: 135, name: "电器", itemStyle: { color: "#ff9900" } },
              { value: 548, name: "其他", itemStyle: { color: "#c4ebad" } }
            ]
          }
        ]
      };

c.柱状图加折线图

let option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["销量A", "销量B", "销量C", "利润"]
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月"]
        },
        yAxis: [
          {
            type: "value",
            name: "销量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 件"
            }
          },
          {
            type: "value",
            name: "利润",
            min: 0,
            max: 5000,
            interval: 1000,
            axisLabel: {
              formatter: "{value} 元"
            }
          }
        ],
        series: [
          {
            name: "销量A",
            type: "bar",
            data: [100, 120, 90, 110, 130, 150]
          },
          {
            name: "销量B",
            type: "bar",
            data: [50, 80, 70, 90, 100, 120]
          },
          {
            name: "销量C",
            type: "bar",
            data: [30, 40, 50, 60, 70, 80]
          },
          {
            name: "利润",
            type: "line",
            yAxisIndex: 1,
            data: [3000, 3500, 3200, 4000, 4200, 4500]
          }
        ]
      };

d.双折线图

let option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["利润","利率"]
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月"]
        },
        yAxis: [
          {
            type: "value",
            name: "利润",
            min: 0,
            max: 5000,
            interval: 1000,
            axisLabel: {
              formatter: "{value} 元"
            }
          },
          {
            type: "value",
            name: "利率",
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            name: "利润",
            type: "line",
            yAxisIndex: 0,
            data: [3000, 3500, 3200, 4000, 4200, 4500]
          },
          {
            name: "利率",
            type: "line",
            yAxisIndex: 1,
            data: [0.1, 0.23, 0.32, 0.5, 0.42, 0.4]
          }
        ]
      };

3.引入使用

option && myChart.setOption(option);

二.滚动展示板，纵向柱状图(DataV) 

1.滚动展示板

//组件部分
<dv-scroll-board :config="config" />
//数据部分
config: {
          header: ['商品名称', '销售额'],//列名称
          data: [                       //行数据
          { name: '商品A', value: 1000 },
          { name: '商品B', value: 800 },
          { name: '商品C', value: 600 },
          { name: '商品D', value: 400 },
          { name: '商品E', value: 200 },
          { name: '商品F', value: 600 },
          { name: '商品G', value: 400 },
          { name: '商品H', value: 200 }
        ],
      }

2.柱状图

//组将部分
<dv-capsule-chart :config="config" />
//数据部分
config: {
        data: [
          { name: '1月', value: 1000 },
          { name: '2月', value: 800 },
          { name: '3月', value: 600 },
          { name: '4月', value: 400 },
          { name: '5月', value: 200 }
        ],
        showValue: true//柱状图上是否显示数值
      }