前端 - 能否给图表添加基于数据值计算的平均线横线？

Question

在使用 VChart 图表库时，能否做到类似于下图的效果，在图表中添加标注线表示数据的平均值？

Answer 1

使用markLine
前提是要:

import 'echarts/lib/component/markLine';

然后

   markLine: {        symbol: ['none', 'none'], //去掉两端箭头        label: {          //标签          position: 'insideEndTop'        },        lineStyle: { type: 'dotted', color: '#663366' }, //设置标线        data: [          {            type: 'average' //标线的数据类型          }        ]      }

Answer 2

VChart有着丰富的数据标注能力，对于您描绘的场景，只需要在markLine中配置x: 'average'即可。

const spec = {  type: "bar",  data: [    {      id: "barData",      values: [        { type: "Autocracies", year: "1930", value: 129 },        { type: "Autocracies", year: "1940", value: 133 },        { type: "Autocracies", year: "1950", value: 130 },        { type: "Autocracies", year: "1960", value: 126 },        { type: "Autocracies", year: "1970", value: 117 },        { type: "Autocracies", year: "1980", value: 114 },        { type: "Autocracies", year: "1990", value: 111 },        { type: "Autocracies", year: "2000", value: 89 },        { type: "Autocracies", year: "2010", value: 80 },        { type: "Autocracies", year: "2018", value: 80 },        { type: "Democracies", year: "1930", value: 22 },        { type: "Democracies", year: "1940", value: 13 },        { type: "Democracies", year: "1950", value: 25 },        { type: "Democracies", year: "1960", value: 29 },        { type: "Democracies", year: "1970", value: 38 },        { type: "Democracies", year: "1980", value: 41 },        { type: "Democracies", year: "1990", value: 57 },        { type: "Democracies", year: "2000", value: 87 },        { type: "Democracies", year: "2010", value: 98 },        { type: "Democracies", year: "2018", value: 99 }      ]    }  ],  xField: ["year", "type"],  yField: "value",  seriesField: "type",  legends: {    visible: true,    orient: "top",    position: "start"  },  markLine: [    {      y: "average",      label: {        visible: true,        position: "insideEndTop",        text: "Average Country",        style: {          fill: "#000"        },        labelBackground: {          visible: false        }      }    }  ]};

在线效果参考：https://codesandbox.io/s/average-markline-wgfdkg

Answer 3