随笔分类 - echarts

echarts 窗口范围 dataZoom

摘要：dataZoom: [{ show: true, //显示 type:'silder, //类型为滑动条显示 fillerColor: "rgba(244, 72, 8, 0.4)", // 选中范围的颜色 borderColor: "rgba(40, 9, 242, 1)", //组件的背景颜色阅读全文

posted @ 2023-04-23 14:55 小成- 阅读(41) 评论(0) 推荐(0) 编辑

柱状图x轴坐标显示不全

摘要：this.option = { xAxis: { type: "category", //类目轴 data: BarData.map((item) => item.data), axisLine: { lineStyle: { color: "#17b3a3", }, }, interval: 0, 阅读全文

posted @ 2023-01-11 15:47 小成- 阅读(174) 评论(0) 推荐(0) 编辑

柱状图的粗细

摘要：series: [ { name: "活动详情页浏览人数", data: [120, 200, 150, 80, 70, 110, 130], type: "bar", barWidth: 30, }, { name: "活动完成人数", data: [120, 200, 150, 80, 70, 阅读全文

posted @ 2023-01-05 10:22 小成- 阅读(40) 评论(0) 推荐(0) 编辑

y轴加单位

摘要：yAxis: [ { type: "value", }, { type: "value", name:'单位：人', position:'right' //显示在右边 }, ], 阅读全文

posted @ 2023-01-05 10:08 小成- 阅读(52) 评论(0) 推荐(0) 编辑

图例的分布

摘要：series: { legend: { orient: 'vertical', // vertical 是竖向 horizontal 是横向 top: 'bottom', //在视图的底部 right: 'right', //在视图的右侧 icon: 'circle', //图例的形状 circle 阅读全文

posted @ 2022-11-25 22:11 小成- 阅读(5) 评论(0) 推荐(0) 编辑

柱状图图表上方显示数字

摘要：series: { itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 12 } } } } } 阅读全文

posted @ 2022-11-25 21:39 小成- 阅读(818) 评论(0) 推荐(0) 编辑

遍历echarts图

摘要：拿到接口返回的数据遍历几个图，就组装成遍历的数据 //比如遍历两个图表 this.seriesData = [ { data: [ { value: 1048, name: "Search Engine" }, { value: 735, name: "Direct" }, { value: 5 阅读全文

posted @ 2022-11-25 21:25 小成- 阅读(187) 评论(0) 推荐(0) 编辑