版本

留神Echarts的版本，新旧版本有些语法不同，例：

series:[    type:'bar',    itemStyle:{        barBorderRadius: 5    }]

旧版本外面边框圆角设置用barBorderRadius，
而新版本应用borderRadius设置。

options各项配置

title

题目组件：顾名思义就是设置题目相干属性

legend

图例组件：展示不同系列的标记，个别通过标记过滤数据

grid

直角坐标系内绘图网格，个别用于设置坐标系地位

xAxis

直角坐标系 grid 中的 x 轴，

  • xAxis. interval
    number
    强制设置坐标轴宰割距离。
  • xAxis. silent
    boolean
    坐标轴是否是动态无奈交互。

  • xAxis. gridIndex
    number
    x 轴所在的 grid 的索引，默认位于第一个 grid。多个x轴时须要指定

    yAxis

    yAxis
    直角坐标系 grid 中的 y 轴，根本同上。
    留神xAxis,yAxis密不可分，即x轴，y轴要么都写，要么都不写。若只须要显示一个则指定另一个show为false。

    3/4环形图实现

    <script>export default {data () {  return {    ectOpts: {},    data: [],  };},computed: {  total () {    let total = this.data.reduce((item1, item2) => {      return (typeof item1 === "number" ? item1 : item1.num) + item2.num;    });    return total;  },},created () {  this.getData();},mounted () {  this.initEchart();},methods: {  getData () {    this.data = [      { name: "钱包领取", num: 13210 },      { name: "现金支付", num: 42111 },      { name: "记账领取", num: 81711 },      { name: "挪动领取", num: 121700 },    ];    this.data.forEach((item) => {      item.percent = ((item.num / this.total) * 100).toFixed(1);    });  },  initEchart () {    let color = [      "rgba(255, 135, 0, 1)",      "rgba(255, 195, 0, 1)",      "rgba(0, 228, 115, 1)",      "rgba(0, 157, 255, 1)",    ].reverse();    let pieSeries = [];    let lineYAxis = [];    this.data.forEach((item, index) => {      let iname = item.name;      let inum = item.num;      pieSeries.push({        name: iname,        type: "pie",        radius: [65 - 15 * index + "%", 57 - 15 * index + "%"],        // 敞开悬停动画        hoverAnimation: false,        // 是否逆时针旋转        clockwise: false,        center: ["30%", "50%"],        label: {          show: false,        },        data: [          {            // 只设置3/4的值，以用于3/4环形图            value: inum * 0.75,            name: iname,          },          {            // 这里的值+下面的值为总和，然而只占比75%            value: (this.total - inum) * 0.75,            itemStyle: {              color: "rgba(0, 132, 251, 0.2)",            },          },          {            // 弃用25%的环形图不做显示            value: this.total * 0.25,            itemStyle: {              color: "rgba(0,0,0,0)",            },          },        ],      });      lineYAxis.push({        value: index,        textStyle: {          rich: {            circle: {              color: color[index],              padding: [0, 5],            },          },        },      });    });    this.ectOpts = {      tooltip: {        trigger: "item",        // formatter: '{a} <br/>{b}: {c} ({d}%)',        formatter: (item) => {          return (item.percent / 0.75).toFixed(1) + "%";        },      },      color,      grid: {        top: "15%",        bottom: "54%",        left: "30%",        containLabel: false,      },      // 有yAxis必须有xAxis      xAxis: [{ show: false }],      yAxis: [        {          type: "category",          inverse: true,          axisLine: {            show: false,          },          axisTick: {            show: false,          },          axisLabel: {            formatter: (params) => {              let item = this.data[params];              return `{line|··················}{circle|●}{name|${item.name}：}{value|${item.num}辆，}{percent|占${item.percent}%}`;            },            interval: 0,            inside: true,            rich: {              line: {                width: 50,                height: 1,                color: "rgba(236, 236, 236, 1)",                // borderType: "dashed",                // borderColor: "#D9DFEB",                // borderWidth: 1,              },              bd: {                padding: [0, 5],              },              value: {                // fontSize: 15,                // fontWeight: 500,              },            },            textStyle: {              color: "#fff",              fontSize: 14,            },            show: true,          },          data: lineYAxis,        },      ],      series: pieSeries,    };  },},};</script>