1.下载及引入
在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js
,点击并保存为 echarts.js
文件。
在html文件中的script标签的src属性中引入
2.柱形表、
type:bar是柱状图,line是线型图,
<script type="text/javascript">
var echart = echarts.init(document.getElementById("container"),'purple-passion');
var option = {
color:["#f70","#f70","#f70","#f70","#f70",]
title: {
text: "vue考试成绩分析图"
},
legend: {
data: ["成绩"]
},
tooltip: {},
xAxis: {
data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
},
yAxis: {},
series: [{
type: "bar",
data: [90, 60, 33, 88, 99],
name: "成绩"
},
{
type: "line",
data: [88, 66, 55, 77, 48],
name: "平均成绩",
smooth: true
},
{
type: "line",
data: [10, 20, 15, 6, 3],
name: "80分以上人数",
smooth: true,
areaStyle: {
color: "#f70"
}
},
以上代码效果如下:
3.堆叠图
<script type="text/javascript">
var echart=echarts.init(document.getElementById("container"),'dark');
var option ={
title:{text:"堆叠图"},
tooltip:{trigger:"axis"},
legend:{data:["ui","java","web","python"]},
xAxis:{},
yAxis:{data:["2019","2020","2021"]},
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
series:[
{name:"ui",type:"bar",data:[120,80,70],stack:true},
{name:"java",type:"bar",data:[27,50,100],stack:true},
{name:"web",type:"bar",data:[180,220,240],stack:true},
{name:"python",type:"bar",data:[200,120,80],stack:true},
]
}
echart.setOption(option)
</script>
效果如下:
更多推荐
echart新手入门教程
发布评论