123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <template>
- <div class="center_bottom">
- <Echart
- :options="options"
- id="bottomLeftChart"
- class="echarts_bottom"
- ></Echart>
- </div>
- </template>
- <script>
- import { currentGET } from "api";
- import { graphic } from "echarts";
- export default {
- data() {
- return {
- options: {},
- };
- },
- props: {},
- mounted() {
- this.getData();
- },
- methods: {
- getData() {
- this.pageflag = true;
- currentGET("big6", { companyName: this.companyName }).then((res) => {
- console.log("安装计划", JSON.stringify(res));
- if (res.success) {
- this.init(res.data);
- } else {
- this.pageflag = false;
- this.$Message({
- text: res.msg,
- type: "warning",
- });
- }
- });
- },
- init(newData) {
- this.options = {
- tooltip: {
- trigger: "axis",
- backgroundColor: "rgba(0,0,0,.6)",
- borderColor: "rgba(147, 235, 248, .8)",
- textStyle: {
- color: "#FFF",
- },
- formatter: function (params) {
- // 添加单位
- var result = params[0].name + "<br>";
- params.forEach(function (item) {
- if (item.value) {
- result +=
- item.marker +
- " " +
- item.seriesName +
- " : " +
- item.value +
- "元</br>";
- } else {
- result += item.marker + " " + item.seriesName + " : - </br>";
- }
- });
- return result;
- },
- },
- legend: {
- data: ["品类销售分布"],
- textStyle: {
- color: "#B4B4B4",
- },
- top: "0",
- },
- grid: {
- left: "50px",
- right: "40px",
- bottom: "30px",
- top: "20px",
- },
- xAxis: {
- data: newData.category,
- axisLine: {
- lineStyle: {
- color: "#B4B4B4",
- },
- },
- axisTick: {
- show: false,
- },
- },
- yAxis: [
- {
- splitLine: { show: false },
- axisLine: {
- lineStyle: {
- color: "#B4B4B4",
- },
- },
- axisLabel: {
- formatter: "{value}",
- },
- },
- {
- splitLine: { show: false },
- axisLine: {
- lineStyle: {
- color: "#B4B4B4",
- },
- },
- axisLabel: {
- formatter: "{value}% ",
- },
- },
- ],
- series: [
- {
- name: "销售额",
- type: "bar",
- barWidth: 15,
- itemStyle: {
- borderRadius: 0,
- color: new graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "#956FD4" },
- { offset: 1, color: "#3EACE5" },
- ]),
- },
- data: newData.barData,
- },
- ],
- };
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .center_bottom {
- width: 100%;
- height: 95%;
- .echarts_bottom {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|