建设高端网站公司,淘宝客网站开发视频,优化火车票,留学网站建设开发方案图片展示
一、引入echarts
这里不用多解释 vue里使用 import echarts from “echarts”; html页面引用js文件或用script标签引用
二、定义一个具有宽高的dom div div idechart-broken stylewidth:400px;height: 200px;/div三、定义…图片展示
一、引入echarts
这里不用多解释 vue里使用 import echarts from “echarts”; html页面引用js文件或用script标签引用
二、定义一个具有宽高的dom div div idechart-broken stylewidth:400px;height: 200px;/div三、定义方法 代码如下
// 折线图brokenInit(){var chart4 echarts.init(document.getElementById(echart-broken));chart4.setOption({tooltip: {trigger: axis,backgroundColor: transparent,axisPointer: { // 添加辅助线type: line,lineStyle: {color: #4080FF, // 修改竖线颜色type: dashed, // 修改竖线样式为虚线width: 1.5},},formatter: function(params) {var datetime params[0].axisValue;var datanum params[0].data;var res div stylewidth: 141px;height: 72px;background: linear-gradient(303deg, rgba(253,254,255,0.60) -3%, rgba(244,247,252,0.60) 83%);opacity: 1;box-shadow: 0px 10px 20px 0px rgba(167, 200, 255, 0.5),inset 0px -2px 12px 0px rgba(229, 237, 250, 0.5),inset 0px 2px 6px 0px rgba(229, 237, 250, 0.9);div stylepadding-left: 6px;padding-top: 10px;span stylewidth: 33%;font-size: 12px;line-height: 20px;height: 20px;color:#1D2129;font-weight: 700;${datetime}/spandiv stylewidth: 125px;height: 32px;border-radius: 4px;opacity: 1;background: rgba(255, 255, 255, 0.8);box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);display: flex;justify-content: space-evenly;align-items: center;span stylefont-size: 12px;color: #4E5969;专题图数量/spanspan stylefont-size: 13px;color: #1D2129;font-weight: 700;font-style: italic;${datanum}/span/div/div/div;return res;}},xAxis: {type: category,boundaryGap: false, // 和0刻度线对齐方式data: this.brokenDate.map(item item.name),axisLine: { // 修改X轴线的样式lineStyle: {color: #E5E8EF // 将x轴颜色改为浅灰色}},axisLabel: {color: #86909C // 设置x轴刻度上的数据颜色为黑色},axisTick: {show: false},splitLine: { // 设置分隔线样式show: true,lineStyle: {color: #E5E8EF,type: dashed, // 修改竖线样式为虚线}},},yAxis: {type: value,axisLine: {lineStyle: {color: #E5E8EF // 将Y轴颜色改为浅灰色}},axisLabel: {color: #86909C // 设置Y轴刻度上的数据颜色为黑色},axisTick: {show: false},splitLine: { // 设置分隔线样式show: true,lineStyle: {type: dashed, // 改成虚线color: #E5E8EF}},},color: #249AFF,series: [{data: this.brokenDate.map(item item.value),type: line,smooth: true,lineStyle: { // 设置折线样式width: 3 // 设置折线宽度},symbol: none, // 去除小圆点areaStyle: {normal: {color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: rgba(17, 126, 255, 0.5) // 0% 处的颜色深一点},{offset: 0.7,color: rgba(17, 128, 255, 0.1) // 90% 处的颜色浅一点},{offset: 1,color: rgba(17, 128, 255, 0) // 100% 处的颜色完全透明}],globalCoord: false // 默认为 false}}}}]})// 自适应window.addEventListener(resize, () {chart4.resize();})},tooltip里的 模板字符串 dom结构 前端不方便调试效果图
可以先在dom里写好调试好效果之后 在复制粘贴到 tooltip里的模板字符串
配置阴影和渐变色 在series里配置 normal: { color: { x: 0, y: 0, x2: 0, y2: 1, colorStops:[] 即可 具体代码在代码块里
