[DAY29]vue dr-vue-echarts 图表套件(下)

我们这次来继续做图表,让网页更漂亮。
此篇参考:
点我

折线图

这是折线图的基本架构,元件名称叫line-chart,资料为data2。

<template>
  <div >
    <div class="chart">
        <line-chart :data="data2" 
        x-name="年份"
        y-name="金额"
        />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
/*eslint-disable*/

export default {
  name:'usechart',
  data:()=>({
      data2: [
        {
          name: "营业额",
          data: [
            {label: "2015",value: 111000},
            {label: "2016",value: 87000},
            {label: "2017",value: 78000},
            {label: "2018",value: 81000},
            {label: "2019",value: 98000},
            {label: "2020",value: 75000}
          ]
        }
      ]
  }),
  components: {
  },
  methods:{
  }
}
</script>
<style  scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

若想要直直的线变弯曲的线,加上:smooth="true"

        <line-chart :data="data2" 
        x-name="年份"
        y-name="金额"
        :smooth="true"
        />

若要新增多笔资料源,则修改data2的资料

      data2: [
        {
          name: "营业额",
          data: [
            {label: "2015",value: 111000},
            {label: "2016",value: 87000},
            {label: "2017",value: 78000},
            {label: "2018",value: 81000},
            {label: "2019",value: 98000},
            {label: "2020",value: 75000}
          ]
        },
        {
          name: "成本",
          data: [
            {label: "2015",value: 90000},
            {label: "2016",value: 80000},
            {label: "2017",value: 83000},
            {label: "2018",value: 84000},
            {label: "2019",value: 79000},
            {label: "2020",value: 71000}
          ]
        }
      ]

圆饼图

这是圆饼图的基本型态,使用data3的资料

<template>
  <div >
    <div class="chart">
        <pie-chart :data="data3"/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
/*eslint-disable*/

export default {
  name:'usechart',
  data:()=>({
      data3: [
        {
          name: '东部',
          value: 33,
        },
        {
          name: '南部',
          value: 14,
        },
        {
          name: '西部',
          value: 11,
        },
        {
          name: '北部',
          value: 46,
        },
      ],
  }),
  components: {
  },
  methods:{
  }
}
</script>
<style  scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

若想改成空心圆,加上pie-style="donut"。

        <pie-chart :data="data3"
        pie-style="donut" 
        />

还有另一种样式pie-style="rose",变成大小不一的圆饼图

        <pie-chart :data="data3"
        pie-style="rose" 
        />

radius="60%",可以设定圆的半径。

        <pie-chart :data="data3"
        pie-style="pizze" 
        radius="60%"
        />

<<:  第39天-学习 od 指令

>>:  来讲讲 Cypher 的 Coding Style 吧

[Day 24] Scoping — 计画通り

It's truly the beginning. Scoping is a big hurdle...

Day10. User Story 与 UX / UI 设计流程

当概念验证过有价值且方向大致正确後,就会开始撰写 User Story,然後进入正式的 UX/UI ...

D28 第十六周 (回忆篇)

终於完结第十一周作业 最後集中在两天的时间把部落格作业写出来,前面花时间跟留言板搏斗的经验果然有派上...

VScode 刚载完的必备扩充功能

各位在刚载好VScode都会做甚麽样的设定或安装甚麽扩充功能呢? 虽然网路上一大堆的介绍,但零零总总...

卡夫卡的藏书阁【Book5】- Kafka 安装与基本设定

“I am a cage, in search of a bird.” ― Franz Kafka...