什么是手机网站建设,手机网站建设+上海,佛山网站制作网页,wordpress 万能表单这一期来美化我们仅有的三个可视化图形#xff08;可怜#xff09;#xff0c;毕竟#xff0c;帅是一辈子的事。
1 折线图改面积图#xff08;渐变色#xff09;
需求#xff1a;折线图改为蓝色的面积图#xff0c;并且有一点的渐变色。
这个非常简单#xff0c;只…这一期来美化我们仅有的三个可视化图形可怜毕竟帅是一辈子的事。
1 折线图改面积图渐变色
需求折线图改为蓝色的面积图并且有一点的渐变色。
这个非常简单只需要修改LineChart.vue的series部分添加一个属性: areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgba(80,215,237,0.99)},{offset: 1,color: rgb(28,70,206)}])},就实现了一个渐变色的面积图了: 2 柱状图
需求柱状图五个柱子的颜色不同并且带有渐变色柱子是圆角的并且文字显示在柱子上方。
这个实现也纯粹是echarts的设置问题。
series: [{name: 评分,type: bar,data: [8.5, 9.0, 7.5, 9.3, 8.0],label: {show: true,position: top},itemStyle: {borderRadius: [5, 5, 0, 0], // 设置柱子的圆角color: (params) {// 定义每根柱子的渐变色const colorList [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: red },{ offset: 0, color: pink }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: orange },{ offset: 0, color: lightyellow }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: yellow },{ offset: 0, color: lightyellow }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: green },{ offset: 0, color: lightgreen }]),new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: cyan },{ offset: 0, color: lightcyan }])];return colorList[params.dataIndex];}},},],实现效果 3 饼图
需求饼图可以选中并且默认选中景点最多的城市并且具体的数据在文字后面可以显示。
这个需要开启select模式设置才有用开启后就可以选中饼图了默认的选中模式需要在获取数据的时候找到数据最大的那个并且设置selectedtrue
series: [{type: pie,selectedMode: single, //注意这个必须有否则设置selected无效data: [{name:东京,value:104},{name:大阪,value:81},{name:京都,value:47},{name:横滨,value:51},{name:名古屋,value:62}],label: {normal: {position: outside, // 标签显示在饼图外部formatter: {b}({d}%) // 标签格式}},}]mounted() {getCityRank().then(res {// 获取最大值对应的索引const maxIndex res.data.data.findIndex(item item.value Math.max(...res.data.data.map(i i.value)));// 选中最大值对应的扇区this.chartOptions.series[0].data res.data.datathis.chartOptions.series[0].data[maxIndex].selected true;})}实现效果
4 展望
下一期开始我们来做数据的增删改查对接 ✅
