javascript - 图表。是否可以制作这种类型的图表?
解决方案
对的,这是可能的。而且画起来不难,但更难支持。我不确定您是否正确理解了您将使用的数据模型,但我绘制的形状与您图片中的完全相同。
var myChart = echarts.init(document.getElementById('main'));
var axisData = [0,1,2,3,4,5,6,7];
var colors = {
green: '#75e160',
red: '#d8403e',
blue: '#7447c8',
black: '#000000'
};
function upperDataGenerator(extremum) {
var data = [];
for (var i = 0; i <= extremum; i += 0.01) { data.push([i, -Math.sin(i)]) }
return data
}
function lowerDataGenerator(extremum){
var data = [];
for (var i = 0; i <= extremum; i += 0.01) { data.push([i, Math.sin(i)]) }
return data
}
var maxChartValue = 3 * Math.PI
var dataUpper = upperDataGenerator(maxChartValue);
var dataLower = lowerDataGenerator(maxChartValue);
option = {
xAxis: { data: axisData, type: 'value', max: 'dataMax' },
yAxis: { data: axisData, type: 'value', min: -3, max: 3 },
series: [
{
type: 'line',
data: dataUpper,
showSymbol: false,
areaStyle: {},
lineStyle: { color: 'blue' }
},
{
type: 'line',
data: dataLower,
showSymbol: false,
areaStyle: {},
lineStyle: { color: colors.black }
}
],
visualMap: [
{
type: 'piecewise',
show: false,
seriesIndex: [0,1],
orient: 'vertical',
pieces: [
{
min: 0,
max: 0.5,
color: colors.black
},
]
},
{
type: 'piecewise',
show: false,
seriesIndex: [1],
dimension: 0,
pieces: [
{
min: 0,
max: maxChartValue / 3,
color: colors.green
},
{
min: maxChartValue / 3,
max: maxChartValue - maxChartValue / 3,
color: colors.red
},
{
min: maxChartValue / 2,
max: maxChartValue,
color: colors.green
},
],
},
{
type: 'piecewise',
show: false,
seriesIndex: [0],
dimension: 0,
pieces: [
{
min: 0,
max: maxChartValue / 3,
color: colors.green
},
{
min: maxChartValue / 3,
max: maxChartValue - maxChartValue / 3,
color: colors.red
},
{
min: maxChartValue / 2,
max: maxChartValue,
color: colors.green
},
],
},
]
};
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>
推荐阅读
- scala - Scala偏函数类型定义
- swift - 错误:变量在其自己的初始值中使用 type(of:) 函数
- java - 从jsp页面的多选复选框转换参数
- javascript - jquery : 函数启动和完成时改变背景颜色
- java - 想要确认消息,重新启动时丢失消息
- javascript - 我可以在要传递到循环中的箭头函数的参数中使用 for 循环迭代器吗?
- python - AWS DLAMI - 没有为 Keras 显示 GPU
- php - 合并 2 个数组并在数组 PHP 中允许相同的值
- java - 遍历链表后如何将指针移动到链表的前面?
- ios - 如何在 Apple Developer Account 中添加测试人员?