需求需要,第一次使用echart,记录一下,先看一下最终效果图
直接看代码及注释吧。
html
<div id="x_count_echart">
</div>
css
#x_count_echart{
height: 460px;
width: 500px;
}
js,设置的有点多哈,可以看最后说明
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('x_count_echart'));
// 指定图表的配置项和数据
var option = {
color: ['#52BEDB'], //柱状图的颜色
title: {
text: '全国军民融合创新', //图表的名称
x: 'center', //显示位置
bottom:'0',
textStyle:{
color:'#000',
fontSize:'20',
}
},
legend: {
data:['销量','销量1','销量2'],
x: 'center',
bottom:'60',
},
xAxis: { // x轴的设置
name: '区域',
nameLocation: 'start',
nameTextStyle: {
fontSize: 14,
padding: [35,0,0,10],
color: '#52BEDB'
},
data: ["区域","区域","区域","区域","区域","区域","区域","区域","区域"," "]
},
grid: {
bottom: '20%',
containLabel: true
},
yAxis: { //y轴的设置
name: '个数',
min: 200, //y轴刻度设置,区间为200-650
max: 650,
interval:50, //递增50
nameTextStyle: {
fontSize: 14,
padding: [0,35,0,0],
color: '#52BEDB'
},
axisLine: { // y轴线
show:false
},
splitLine: { //y轴网格
show: false
},
axisTick: { //y轴刻度线
show: false
}
},
series: [{ //这里定义要显示的图形
name: '销量',
type: 'bar', //柱状图
data: [470, 380, 360, 230, 210, 350, 600, 525, 425, 200]
},
{
name:'销量1',
type:'line', //折线图
symbolSize:8,
symbol: 'square', //点的样式为正方形
itemStyle : { /*设置折线颜色*/
normal : {
color:'#E26A6A'
}
},
data:[400, 350, 340, 260, 252, 395, 650, 585, 525, 370]
},
{
name:'销量2',
type:'line', //虚线
symbolSize:8,
symbol: 'circle',//点的样式为圆形
data:[240, 355, 350, 348, 340, 420, 480, 600, 625, 500],
color:['#89C4F4'],
smooth:false, //这是设置虚线所需属性
itemStyle : { /*设置折线颜色*/
normal : {
borderColor: '#4C8E9F',
lineStyle: {
width:2,
type:'dotted' //线条样式,虚线
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
才开始使用时,是不是感觉官网教程看不懂的感觉,到处搜这样那样设置。其实吧,一般是我们没好好看文档。
他列出来的使用格式和我们实际使用格式好像不太一样,慢慢来,找到他的使用方法,所有属性都可以为所欲为所欲为