<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main" style=" 600px;height:400px;"></div>
<script src="./js/echarts.js"></script>
<script>
// app.title = '多 X 轴示例';
//已知x轴上的点：
var leftx,
zero,
maxPos,
my,
rightx;
var xAxisData = [leftx,zero,maxPos,my,rightx]; //var xData = [-0.5, 0, 0.1, 0.4, 0.8];
// var xData = [leftx,zero,-leftx,];
//示例数据 var data1 = [[-0.5,5],[0,30],[0.1,90],[0.6,30],[0.8,5]];
// var data1 = [[-0.5,5],[0,30],[0.3,60]];
// var data2 = [[-0.5,5],[0,50],[0.1,90],[0.4,30],[0.8,5]];
var data1 = [5,50,90,30,5];
var data2 = [[-0.5,5],[0,50],[0.15,90],[0.4,30],[0.8,5]];
// var xData = [-0.5,0,0.15,0.4,0.8];
// var yData = [5,50,90,30,5];
//使用双坐标轴 绘制两遍：上面一个坐标轴使用category类型 下面使用type：value类型 （负的使用绿色 正的使用红色和上面使用category的红色重合）
// 正态分布
function normal(u,d,x){
var PI = 3.1415926;
var y = (1/(Math.sqrt(2*PI)*d))*Math.exp(-(x-u)*(x-u)/(2*d*d));
y = y.toFixed(2);
return y;
}
//计算方差
var data2= [];
var xData = [-0.5,0,0.15,0.4,0.8];
var u = 0.15, d = 0.16; //均值 方差
for(var i=0,len=xData.length;i<len;i++){
var x = xData[i];
var y = normal(u,d,x);
// var y = getY(x,u);
data2.push([x,y]);
}
function getY(x,c){
var y ;
if(x-c>0){
y= 1/(x-c);
}else if(x==c){
y = 1/0.0001;
}else {
y = -1/(x-c);
}
y = y.toFixed(2);
return y;
}
function getCenterY(x){
}
console.log('data2',data2);
var colors = ['#5793f3', '#d14a61', '#675bba'];
var option = {
color: colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
data:['line2 ']
},
// grid: {
// top: 70,
// bottom: 50
// },
xAxis: [
{
type: 'value', //category 坐标轴在上方
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
/*formatter: function (params) {
return '降水量 ' + params.value
+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
}*/
}
},
// data: xData
},
],
yAxis: [
{
type: 'value',
show:false
}
],
visualMap: {
// type: 'continuous', // 定义为连续型 viusalMap
show: false,
dimension: 0, //指明维度 [[x1,y1],[x2,y2],...] 0代表x1 x2 1代表y1,y2
pieces: [{
lte: 0,
color: 'green'
}, {
gt: 0,
lte: 1,
color: 'red'
}]
},
series: [
{
name:'line2',
type:'line',
smooth: "true",
// xAxisIndex: 1,
data: data2, //[5,30,90,30,5],
symbol: 'circle',
symbolSize: 8,
// color:"blue",
// lineStyle:{
// color:"red",
// opacity:0.5
// },
itemStyle: {
normal: {
borderWidth: 0,
borderColor:'' ,
color: ''
},
emphasis: {
label:{
show:true,
},
borderWidth: 0,
borderColor:'' ,
color: ''
}
},
markPoint: {
data: [
{
coord:[0.4,30],
value: '您的位置',
symbol:"rect",
symbolSize:[80,25],
symbolOffset:[45,-20]
}
]
},
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
</script>
</body>
</html>
