123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <template>
- <div class="chart" :id="id"></div>
- </template>
- <script>
- import util from "@/helper/util.js";
- import partten from "@/helper/partten.js";
- import * as echarts from "echarts";
- export default {
- name: "Dashboard-chart",
- componentName: "Dashboard-chart",
- props: {
- width: {
- type: String,
- default: "100%",
- },
- height: {
- type: String,
- default: "100%",
- },
- name: {
- type: String,
- default: "万KWH",
- },
- value: {
- type: Number,
- default: 50,
- },
- },
- data() {
- return {
- id: "",
- chart: null,
- };
- },
- computed: {},
- methods: {
- initChart() {
- let themeName = '';
- this.$store.state.themeName === "dark" ? themeName = true : themeName = false;
-
- let chart = echarts.init(this.$el);
- let value = this.value;
- let option = {
- grid: {
- top: 8,
- bottom: -16,
- left: 8,
- right: 8,
- },
- series: [
- {
- type: "gauge", //刻度轴表盘
- radius: "115%", //刻度盘的大小
- center: ["50%", "75%"],
- startAngle: 180, //开始刻度的角度
- endAngle: 0, //结束刻度的角度
- axisLine: {
- show: true,
- lineStyle: {
- width: 8,
- color: [
- [0, partten.getColor("gray") + "33"],
- [value / 100,themeName ? partten.getColor("green") : partten.getColor("blue")],
- [1, partten.getColor("gray") + "33"],
- ],
- },
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- pointer: {
- show: false,
- },
- title: {
- show: true,
- offsetCenter: [0, "-40%"],
- textStyle: {
- color: partten.getColor("gray"),
- fontSize: util.vh(12),
- },
- },
- detail: {
- show: true,
- offsetCenter: [0, "0%"],
- color: "#ffffff",
- formatter: function(params) {
- return params;
- },
- textStyle: {
- color: themeName ? partten.getColor("green") : partten.getColor("blue"),
- fontSize: util.vh(16),
- },
- },
- data: [
- {
- name: "万KWh",
- value: value,
- },
- ],
- },
- {
- type: "gauge",
- radius: "115%",
- center: ["50%", "75%"],
- startAngle: 180,
- endAngle: 0,
- axisLine: {
- show: true,
- lineStyle: {
- width: 1,
- color: [
- [this.value / 100, themeName ? partten.getColor("green") : partten.getColor("blue")],
- [1, "#fff5"],
- ],
- },
- },
- splitLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- detail: { show: false },
- },
- ],
- };
- chart.setOption(option);
- },
- },
- created() {
- this.id = "pie-chart-" + util.newGUID();
- },
- mounted() {
- this.$nextTick(() => {
- this.$el.style.width = this.width;
- this.$el.style.height = this.height;
- this.initChart();
- });
- },
- updated() {
- this.$nextTick(() => {
- this.initChart();
- });
- },
- watch: {
- "$store.state.themeName"() {
- this.initChart();
- },
- },
- };
- </script>
- <style lang="less">
- .chart {
- width: 100%;
- height: 100%;
- display: inline-block;
- }
- </style>
|