http://echarts.baidu.com/index.html
直接用script引入从官网下载的echarts.js文件
官网的文件有几种版本的,按需下载即可,注意精简版的只显示折线、圆柱等几个图表,而且只显示图,连标题都是不显示的,一般使用的话下载普通就行。
基本使用:
在HTML里必须有一个固定宽高的容器,这样才能显示出来
//指定图标的配置和数据 var option = { title:{ //标题 text:‘2017年 下半年‘ }, tooltip:{ //提示框 formatter: ‘{b}{a}: {c}万‘ //内容: {a}:为图表的名字 {b}:为x轴的项 {c}为Y轴的值,单纯的数值,需要单位的话要在后面自己添加
}, legend:{ data:[‘账单‘] },
grid: {//图表间距
left: ‘2%‘,
right: ‘10%‘,
bottom: ‘2%‘,
containLabel: true
},
xAxis:{
axisTick: {//去掉刻度 show: false },
data:["7月","8月","9月","10月","11月","12月"]
},
yAxis:{
axisLabel:{ formatter: ‘{value} 万‘ },
splitLine:{//去掉网格线 show:false },
axisTick: {//去掉刻度 show: false }
},
series:[
{ name:‘账单‘,
type:‘line‘,
symbol:‘circle‘,//拐点样式
symbolSize: 12,//拐点大小 i
temStyle:{ color:"#cc9966" },
data: [22,25,20,18,29,25] }]
};
//初始化echarts实例 var myChart = echarts.init(document.getElementById(‘chart‘));
//使用制定的配置项和数据显示图表 myChart.setOption(option);