HTML导入不了echarts
读了好多次官方文档，也看了不少博客，但是自己按照提示的方法做出来之后，无论怎样都打开之后什么都不显示，希望dalao可以帮助一下。（代码如图）...
读了好多次官方文档，也看了不少博客，但是自己按照提示的方法做出来之后，无论怎样都打开之后什么都不显示，希望dalao可以帮助一下。（代码如图）
展开
2个回答
展开全部
/* 别人写的demo，放到编辑器试了下是可以正常运行的，你可以借鉴借鉴，看下自己的代码哪里出错了*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>echarts</title>
<!--引入ECharts文件-->
<script type="text/javascript" src="echarts/echarts.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="main" style="width: 80%; height: 200px;margin: auto;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts',
show: true,
target: 'blank',
textStyle: {
color: '#673AB7',
fontStyle: 'normal',
fontWeight: 'bold',
fontFamily: 'sans-serif',
fontSize: 18
}
},
tooltip: {
trigger: 'axis',
formatter: function(params, ticket, callback) {
console.log(params,'==params');
console.log(ticket,'==ticket');
console.log(callback,'==callback');
params.data
}
},
axisLine: {
show: false
},
splitLine: {
show: true
},
axisTick: {
show: false,
alignWithLabel: true
},
toolbox: {
show: false,
feature: {
dataView: { readOnly: true }, //数据预览
restore: true, //复原
saveAsImage: true, //是否保存图片
magicType: ['line']//支持柱形图和折线图的切换
}
},
legend: {
data: ['.test.']
},
xAxis: {
position: 'bottom',//刻度在上方显示还是在下方显示
offset: 0,//刻度值和x轴的距离
name: '',//坐标轴名称
nameLocation: 'start',//坐标轴名称显示位置
minInterval: 1,
axisTick: {//axisTick 刻度长度
show: true,
alignWithLabel: true,
interval: 2,//0 强制显示所有标签
length:5
},
axisLabel: {
show: true,
interval: 2//0 强制显示所有标签 显示刻度上的所有值
},
data: ["2017-07-01","2017-07-02","2017-07-03","2017-07-04","2017-07-05","2017-07-06","2017-07-07","2017-07-08","2017-07-09"]
},
yAxis: {
show: true,
type: 'value',
axisLabel: {
formatter: function(value,index){
return value.toFixed(3);
}
},
axisLine: {
show: false
},
axisTick: {//axisTick 刻度长度
length:0//刻度长度为0
},
splitNumber:5//y轴各自间距
},
grid: { // 控制图的大小，调整下面这些值就可以，
x: 40,
x2: 0,
y2: 20// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
series: {
name: '.test.',
type: 'line',
data: [5,2,3,1,4,2,1,8,2],
smooth: false,//是否平滑曲线显示
symbol: 'none',//折线图中去掉小圆点
markLine: {
silent: true,
data: []
},
lineStyle: {
normal: {
color: '#7cb5ec',
width: 1.5,
opacity: 0.7
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7cb5ec' // 0% 处的颜色
},{
offset: 0.5, color: '#b4d4f4' // 50% 处的颜色
},{
offset: 1, color: '#fff' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
}
};
myChart.setOption(option);
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
