做网站的服务器还需要空间吗,巴音郭楞网络营销,个人网上注册,外贸免费建设网站制作文章目录 折线图1折线图2折线图3示例 参考#xff1a; Echarts官网 Echarts 配置项
折线图1
带X轴、Y轴标记线#xff0c;其中X轴是’category’ 类目轴#xff0c;适用于离散的类目数据。
let myChart echarts.init(this.$refs.line_chart2);
let yList [400, 500, 6… 文章目录 折线图1折线图2折线图3示例 参考 Echarts官网 Echarts 配置项
折线图1
带X轴、Y轴标记线其中X轴是’category’ 类目轴适用于离散的类目数据。
let myChart echarts.init(this.$refs.line_chart2);
let yList [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];
let xList [n-5, n-4, n-3, n-2, n-1, n, n1, n2, n3, n4, n5];
let option {title: {text: 折线图2,},tooltip: { show: true },xAxis: {type: category,trigger: axis,axisPointer: {type: cross,},data: xList,},yAxis: {type: value,//网格线splitLine: {lineStyle: {type: dashed, //设置网格线类型 dotted虚线 solid:实线},},},series: [{type: line,smooth: true,symbolSize: 6,symbol: circle,data: yList,color: #FFC310,//区域填充样式areaStyle: {//线性渐变前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgba(246,198,56, 0.6),},{offset: 1,color: rgba(246,198,56, 0),},]),},markLine: {silent: true,symbol: [none, none],lineStyle: {type: dashed,dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: x轴标记线,xAxis: n,label: {formatter: {b}{c},},lineStyle: {color: #0050FF,},},{name: y轴标记线,yAxis: 800,label: {formatter: {b}{c},position: insideEndTop,},lineStyle: {color: #00C078,},},],},},],
};myChart.setOption(option);折线图2
带X轴、Y轴标记线其中’value’ 数值轴适用于连续数据。
let myChart echarts.init(this.$refs.line_chart3);
let intervalNum 2;
// 数据类型为二维数组
let dataArray [[0, 400],[2, 500],[4, 800],[5, 1200],[7, 400],[8, 500],[10, 400],[12, 500],
];
let option {title: {text: 折线图2,},tooltip: {show: true,trigger: axis,axisPointer: {type: cross,},formatter: {c},},xAxis: {type: value,axisTick: {// 文字对准刻度alignWithLabel: true,color: #C1C7D0,},minInterval: intervalNum,maxssInterval: intervalNum,},yAxis: {type: value,//网格线splitLine: {lineStyle: {type: dashed, //设置网格线类型 dotted虚线 solid:实线},},},series: [{type: line,smooth: true,symbolSize: 6,symbol: circle,data: dataArray,color: #FFC310,//区域填充样式areaStyle: {//线性渐变前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgba(246,198,56, 0.6),},{offset: 1,color: rgba(246,198,56, 0),},]),},markLine: {silent: true,symbol: [none, none],lineStyle: {color: #FFC310,type: dashed,dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: x轴标记线,xAxis: 7.2,label: {formatter: {b}{c},},lineStyle: {color: #0050FF,},},{name: y轴标记线,yAxis: 800,label: {formatter: {b}{c},position: insideEndTop,},lineStyle: {color: #00C078,},},],},},],
};
myChart.setOption(option);
折线图3
多条折线图 let myChart echarts.init(this.$refs.line_chart4);let option {title: {text: 折线图3,},tooltip: {trigger: axis,valueFormatter: value value 个,},legend: {data: [Email, Union Ads, Video Ads, Direct, Search Engine],},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],},yAxis: {type: value,},series: [{name: Email,type: line,stack: Total,data: [120, 132, 101, 134, 90, 230, 210],},{name: Union Ads,type: line,stack: Total,data: [220, 182, 191, 234, 290, 330, 310],},{name: Video Ads,type: line,stack: Total,data: [150, 232, 201, 154, 190, 330, 410],},{name: Direct,type: line,stack: Total,data: [320, 332, 301, 334, 390, 330, 320],},{name: Search Engine,type: line,stack: Total,data: [820, 932, 901, 934, 1290, 1330, 1320],},],};myChart.setOption(option);示例 !--* Description: * Author: HMM* Date: 2023-05-22 10:49:48* FilePath: \vue-antd-project2\src\views\LineChart.vue
--
templatediv classlineChartdiv refline_chart1 stylewidth: 100%; height: 500px/divdiv refline_chart2 stylewidth: 100%; height: 500px/divdiv refline_chart3 stylewidth: 100%; height: 500px/divdiv refline_chart4 stylewidth: 100%; height: 500px/divbr //div
/template
script
import * as echarts from echarts;
export default {methods: {initLineChart1() {let myChart echarts.init(this.$refs.line_chart1);let xData [9:00, 11:00, , 15:00, 17:00, , 20:00];let valueData [6.0, 8.5, 7.6, 3.5, 10.0, 9.5, 11.0];let option {title: [{text: 恭喜您超过50%的组员,top: 0,left: 20,textStyle: {color: #FFA000,fontSize: 13,},},],grid: {top: 50,left: 20,right: 20,bottom: 8%,containLabel: true,},xAxis: [{type: category,boundaryGap: false,axisLine: { show: false },axisLabel: {//坐标轴刻度标签的相关设置textStyle: {color: #000000,margin: 15,},},axisTick: { show: false },data: xData,},],yAxis: [{type: value,// min: 1,// max: 100,splitLine: { show: false },axisLine: { show: false },axisLabel: { show: false },axisTick: { show: false },},],series: [{name: 金额,type: line,smooth: true, //是否平滑曲线显示symbol: none,color: #1874FF,//区域填充样式areaStyle: {color: rgba(24,116,255, 0.2),shadowColor: rgba(24,116,255, 0.9),shadowBlur: 20,},data: valueData,markLine: {silent: true,symbol: [none, none],lineStyle: {width: 2,type: dotted,color: #E9E9E9,},data: [{name: 组均,yAxis: 8,label: {position: insideStartTop,formatter: 组均{c} ,},},{name: 我的,yAxis: 10,label: {position: insideStartTop,formatter: 我的{c} ,},},{name: 测试,yAxis: 100,label: {position: insideStartTop,formatter: 测试{c} ,},},],},},],};myChart.setOption(option);},initLineChart2() {let myChart echarts.init(this.$refs.line_chart2);let yList [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];let xList [n-5, n-4, n-3, n-2, n-1, n, n1, n2, n3, n4, n5];let option {title: {text: 折线图1,},tooltip: { show: true },xAxis: {type: category,trigger: axis,axisPointer: {type: cross,},data: xList,},yAxis: {type: value,//网格线splitLine: {lineStyle: {type: dashed, //设置网格线类型 dotted虚线 solid:实线},},},series: [{type: line,smooth: true,symbolSize: 6,symbol: circle,data: yList,color: #FFC310,//区域填充样式areaStyle: {//线性渐变前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgba(246,198,56, 0.6),},{offset: 1,color: rgba(246,198,56, 0),},]),},markLine: {silent: true,symbol: [none, none],lineStyle: {type: dashed,dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: x轴标记线,xAxis: n,label: {formatter: {b}{c},},lineStyle: {color: #0050FF,},},{name: y轴标记线,yAxis: 800,label: {formatter: {b}{c},position: insideEndTop,},lineStyle: {color: #00C078,},},],},},],};myChart.setOption(option);},initLineChart3() {let myChart echarts.init(this.$refs.line_chart3);let intervalNum 2;let dataArray [[0, 400],[2, 500],[4, 800],[5, 1200],[7, 400],[8, 500],[10, 400],[12, 500],];let option {title: {text: 折线图2,},tooltip: {show: true,trigger: axis,axisPointer: {type: cross,},formatter: {c},},xAxis: {type: value,axisTick: {// 文字对准刻度alignWithLabel: true,color: #C1C7D0,},minInterval: intervalNum,maxssInterval: intervalNum,},yAxis: {type: value,//网格线splitLine: {lineStyle: {type: dashed, //设置网格线类型 dotted虚线 solid:实线},},},series: [{type: line,smooth: true,symbolSize: 6,symbol: circle,data: dataArray,color: #FFC310,//区域填充样式areaStyle: {//线性渐变前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: rgba(246,198,56, 0.6),},{offset: 1,color: rgba(246,198,56, 0),},]),},markLine: {silent: true,symbol: [none, none],lineStyle: {color: #FFC310,type: dashed,dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: x轴标记线,xAxis: 7.2,label: {formatter: {b}{c},},lineStyle: {color: #0050FF,},},{name: y轴标记线,yAxis: 800,label: {formatter: {b}{c},position: insideEndTop,},lineStyle: {color: #00C078,},},],},},],};myChart.setOption(option);},initLineChart4() {let myChart echarts.init(this.$refs.line_chart4);let option {title: {text: 折线图3,},tooltip: {trigger: axis,valueFormatter: value value 个,},legend: {data: [Email, Union Ads, Video Ads, Direct, Search Engine],},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],},yAxis: {type: value,},series: [{name: Email,type: line,stack: Total,data: [120, 132, 101, 134, 90, 230, 210],},{name: Union Ads,type: line,stack: Total,data: [220, 182, 191, 234, 290, 330, 310],},{name: Video Ads,type: line,stack: Total,data: [150, 232, 201, 154, 190, 330, 410],},{name: Direct,type: line,stack: Total,data: [320, 332, 301, 334, 390, 330, 320],},{name: Search Engine,type: line,stack: Total,data: [820, 932, 901, 934, 1290, 1330, 1320],},],};myChart.setOption(option);},},mounted() {this.initLineChart1();this.initLineChart2();this.initLineChart3();this.initLineChart4();},
};
/script
style styleless scoped/style
