TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
echarts折线图使用示例。包含颜色渐变,节点样式,图例legend样式等
1479
人阅读
2020/6/21 18:57
总访问:
3990894
评论:
0
收藏:
0
手机
分类:
前端
### 设计图如下 ![](https://img.tnblog.net/arcimg/aojiancc2/3df9459969a241f79c0355b17317533b.png) ### 代码如下 ``` <!-- 学习趋势图 --> <template> <div class="learnTrendChartContainer"> <div style="position:absolute;right: 6px;z-index: 1000;"> <select class="yearSelect"> <option>2022</option> <option>2023</option> </select> </div> <div> <div id="labroom-trend-chart" class="labroom-trend-chart" /> </div> </div> </template> <script lang="ts"> export default { // 组件名字 name: 'LearnTrendChart', // 组件参数 props: { }, data() { return { nowPeopleCount: 2895, termPeopleCount: 1025905,//学期累计人次 } }, mounted() { this.createChartByDay() }, methods: { createChartByDay() { // 基于准备好的dom,初始化echarts实例 const myChart = this.$echarts.init(document.getElementById('labroom-trend-chart')) const option = { // 图表颜色设置 color: ['#F2C52A', '#23FFFC', '#1C8DFF', '#FF0087', '#FFBF00'], tooltip: { trigger: 'axis', backgroundColor: "rgba(18,103,167,0.9)", borderColor: "#01DCF3", textStyle: { color: "#fff", fontSize: 12 }, icon: "rect", symbol: "rect", axisPointer: { label: { // y轴格式化函数官方文档:https://echarts.apache.org/zh/option.html#tooltip.axisPointer.label.formatter formatter: function (params) { console.log(params) return params.value + "月"; } }, }, // 分别设置四个方向的内边距 padding: [ 6, // 上 10, // 右 9, // 下 10, // 左 ], valueFormatter: (value) => value + "人次", // 这里使用了格式化函数,也可以不用,不用的话和设计图区别就是线的示例是原点,而不是长方形,没有找到直接设置成长方形的方法,为了和设计图一样就通过formatter自定义格式 formatter: function (params) { var result = '' var dotHtml = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#F2C52A"></span>' // 定义第一个数据前的长方形颜色 var dotHtml2 = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#23FFFC"></span>' // 定义第二个数据前的长方形颜色 var dotHtml3 = '<span style="display:inline-block;margin-right:5px;margin-top:-5px;width:20px;height:7px;background-color:#1C8DFF"></span>' // 定义第二个数据前的长方形颜色 result += "<div>" + params[0].axisValue + "月" + "</div>" + "<div style='margin-top:2px'>" + dotHtml + " 累计评估量: <span style='display:inline-block;margin-left:5px;'>" + params[0].data + "人次" + "</div>" + "<div style='margin-top:3px'>" + dotHtml2 + " 累计实验量: <span style='display:inline-block;margin-left:5px;'>" + params[1].data + "人次" + "</div>" + "<div style='margin-top:3px'>" + dotHtml3 + " 累计项目数: <span style='display:inline-block;margin-left:5px;'>" + params[2].data + "人次</span>" + "</div>"; return result } }, // 图例设置 legend: { // x:'right', //可设定图例在左、右、居中 // padding:[0,50,0,0], // 只设置距离右边 right: 86, // circle,rect ,roundRect,triangle,diamond,pin,arrow,none, //icon:"rect", data: [{ name: "累计评估量", // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆 itemStyle: { color: "#fff", borderColor: '#F2C52A', borderWidth: 1, }, // 单独设置字体颜色 textStyle: { color: "#F2C52A", }, }, { name: "累计实验量", itemStyle: { color: "#fff", borderColor: '23FFFC', borderWidth: 1, }, // 单独设置字体颜色 textStyle: { color: "#23FFFC" } }, { name: "累计项目数", // 图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆 itemStyle: { color: "#fff", borderColor: '1C8DFF', borderWidth: 1, }, textStyle: { color: "#1C8DFF" } } ], //data: ['累计评估量', '累计实验量', '累计项目数'], // textStyle: { // color: "#fff" // } }, grid: { //top: '0%', left: '0%', right: '16px', // bottom: '6%', containLabel: true }, xAxis: { type: 'category', //* ***************不留白,从原点开始************** boundaryGap: false, // 不留白,从原点开始 data: ['Mon', 'Tue', 'Wed', 'Thu', "1", "3", "5", "7", "8", "9"], axisLine: { lineStyle: { color: "#678DBA", } } }, yAxis: { type: 'value', // echart 去掉网格线。去掉横坐标的线 splitLine: { show: false }, axisLine: { lineStyle: { color: "#678DBA", } } }, series: [ { name: "累计评估量", label: { // 格式化输出 formatter: function (params) { // console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!") // console.log(params) return params.value }, show: false, position: 'top' }, itemStyle: { normal: { lineStyle: { width: 1, //折线宽度 } } }, data: [131, 236, 191, 149, 159, 190, 150, 109, 123, 109], type: 'line', smooth: true, symbol: "circle", symbolSize: [8, 8], // 黄色的图 areaStyle: { normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(242, 197, 42,0.12)' }, { offset: 0.34, color: 'rgba(242, 197, 42,0.10)' }, { offset: 1, color: 'rgba(242, 197, 42,0.02)' }]) } } }, { name: "累计实验量", label: { // 格式化输出 formatter: function (params) { return params.value }, show: false, position: 'top' }, itemStyle: { normal: { lineStyle: { width: 1, //折线宽度 } } }, data: [108, 99, 108, 139, 165, 170, 150, 159, 166, 122], type: 'line', symbol: "circle", symbolSize: [8, 8], smooth: true, // 显示出来折线图的面积 areaStyle: { normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(35, 255, 252,0.16)' }, { offset: 0.34, color: 'rgba(35, 255, 252,0.12)' }, { offset: 1, color: 'rgba(35, 255, 252,0.00)' }]) } } }, { name: "累计项目数", label: { // 格式化输出 formatter: function (params) { // console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!") // console.log(params) return params.value }, show: false, position: 'top' }, itemStyle: { normal: { lineStyle: { width: 1, //折线宽度 }, // color: "#fff", // borderColor: '#f58f23', // borderWidth: 1, } }, data: [132, 191, 141, 149, 155, 160, 130, 139, 150, 122], type: 'line', smooth: true, symbol: "circle", symbolSize: [8, 8], // 显示出来折线图的面积 areaStyle: { normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(28, 141, 255,0.22)' }, { offset: 0.34, color: 'rgba(28, 141, 255,0.16)' }, { offset: 1, color: 'rgba(28, 141, 255,0.00)' }]) } } } ] } myChart.setOption(option) } } } </script> <style lang="scss" scoped> .learnTrendChartContainer { position: relative; .labroom-trend-chart { height: 296px; width: 100%; } .yearSelect { width: 69px; font-size: 14px; text-align: center; border: 1px solid #01F3FC; border-radius: 12px; background-color: rgba(20, 41, 68, 1); color: #01F3FC; } } </style> ``` 引入组件: ``` import LearnTrendChart from '@/views/index/component/learnTrendChart.vue' export default { components: { LearnTrendChart }, } ``` 使用组件: ``` <LearnTrendChart></LearnTrendChart> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}