var xData = [];
for (var i = 1; i < 13; i++) {
xData.push(`2021-${i}`);
}
var yData = [29, 65, 131, 18, 50, 58, 58, 67, 34, 123, 112, 99];
yData = yData.map((d) => {
return {
value: d,
itemStyle: {
borderColor: "#16D998",
color: "#fff",
borderWidth: 2,
},
label: {
show: true,
position: "top",
lineHeight: 20,
borderRadius: 5,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: "#ccc",
borderWidth: "1",
padding: [5, 15, 4],
color: "#000000",
fontSize: 14,
fontWeight: "normal",
},
};
// #16D998
});
option = {
emphasis:{
focus:"none",
label: {
show: false,
position: "top",
lineHeight: 20,
borderRadius: 5,
backgroundColor: "rgba(255,255,255,.9)",
borderColor: "#16D998",
borderWidth: "1",
padding: [5, 15, 4],
color: "#16D998",
fontSize: 14,
fontWeight: "normal",
},
},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "15%",
},
xAxis: {
name:"月份",
type: "category",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "solid",
color:"#F0F0F0"
},
},
data: xData,
},
yAxis: {
name:"访问量",
type: "value",
min: 0,
// splitNumber: 3,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "solid",
color:"#F0F0F0"
},
},
},
series: [
{
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 10,
lineStyle: {
normal: {
color: "#16D998",
width: 2,
},
},
tooltip: {
show: false,
},
areaStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(22, 217, 152, 0.8)",
},
{
offset: 1,
color: "rgba(255,255,255,0.3)",
},
],
},
},
},
data: yData,
},
],
};
折线图示例
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 安装依赖 创建组件 1.在src下创建文件夹echarts2.在文件夹echarts下创建testEchart.v...
- 碰到一个小伙伴的问题,是有关Excel折线图的制作。一看非常简单。 一看这数据很简单啊,插入折线图不就完了。动图操...
- 今天为大家讲解锦囊29,用折线图表示大趋势! Step 1:制作标题 1⃣️新建PPT,版式空白 2⃣️插入文本“...
- 先看图 分析图表 首先我们根据上图我们可以看到如下几个元素 边框线 ![5FXGL_@$E{Y)R{}L~1V$]...