码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts 的简单使用

时间:2018-03-01 19:45:51      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:color   lan   注意   chart   ext   不显示   axis   配置   charts   

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);

 

Echarts 的简单使用

标签:color   lan   注意   chart   ext   不显示   axis   配置   charts   

原文地址:https://www.cnblogs.com/haqiao/p/8489707.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!