企业网站建设综合实训心得电商怎么做如何从零开始

功能

每月记录值，当数据大于600画红线，小于300画蓝线，其他在中间值为黑线。鼠标移动上去后，现在数据值。

option = {tooltip: {trigger: 'axis', // 触发类型：坐标轴触发show: true, // 显示提示框formatter: function (params) {// 自定义提示框内容格式return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value}},xAxis: {type: 'category',data: ['3月1日', '4月1日', '5月1日', '6月1日', '7月1日', '8月1日', '9月1日']},yAxis: {type: 'value'},series: [{data: [700, 120, 200, 150, 330, 400, 80, 70, 30, 110, 190],type: 'line',// 设置 smooth 为 true 来启用平滑效果smooth: true,markLine: {symbol: 'none',silent: true,lineStyle: {type: 'solid',width: 2},data: [{ yAxis: 600, name: '1', lineStyle: { color: 'red' } }, // 下限{ yAxis: 300, name: '2', lineStyle: { color: 'blue' } } // 上限]}}],visualMap: {show: false,dimension: 1,pieces: [{ gt: 600, color: 'red' }, // 大于上限{ lt: 300, color: 'blue' }, // 小于下限{ gte: 300, lte: 600, color: 'black' } // 在范围内]}
};

完整的代码

<el-card shadow="never"><el-skeleton :loading="loading" animated><Echart :height="500" :options="echartsOption" /></el-skeleton></el-card>import { EChartsOption } from 'echarts'const echartsOption = reactive<EChartsOption>({tooltip: {trigger: 'axis', // 触发类型：坐标轴触发show: true, // 显示提示框formatter: function (params) {// 自定义提示框内容格式return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value}},xAxis: {type: 'category',data: ['3月1日', '4月1日', '5月1日', '6月1日', '7月1日', '8月1日', '9月1日']},yAxis: {type: 'value'},series: [{data: [700, 120, 200, 150, 330, 400, 80, 70, 30, 110, 190],type: 'line',// 设置 smooth 为 true 来启用平滑效果smooth: true,markLine: {symbol: 'none',silent: true,lineStyle: {type: 'solid',width: 2},data: [{ yAxis: 600, name: '1', lineStyle: { color: 'red' } }, // 下限{ yAxis: 300, name: '2', lineStyle: { color: 'blue' } } // 上限]}}],visualMap: {show: false,dimension: 1,pieces: [{ gt: 600, color: 'red' }, // 大于上限{ lt: 300, color: 'blue' }, // 小于下限{ gte: 300, lte: 600, color: 'black' } // 在范围内]}
}) as EChartsOption