哈哈 最近在用Echarts 做东西 顺便研究了一下Echarts 总结了一些比较常用的代码
话不多说 直接放代码 这是取json的方式生成图表
myChart.showLoading(); // echarts 自带的loading$.get('123.json', function (obama_budget_) {myChart.hideLoading(); // 记得关闭echarts 自带的loadingvar option = {title: { //标题text: '日交易总额的变化趋势',//标题内容 还有副标题(subtext) 用法一样textStyle: { //这是标题的样式属性 fontWeight: 'normal', //标题颜色 color: '#fff',},x:'center'//控制标题的所在位置 同样还有y属性 例 y:'20' 下移20个px},
查看更多标题的样式属性戳我
tooltip : {//这是图表的提示框 就是类似hover在图表上以后出现的trigger: 'axis',//触发类型 axisPointer: {type: 'shadow',//鼠标放上去有阴影label: {show: true//开启}}},
查看更多提示框的样式属性戳我
toolbox: {show : false,//是否显示feature : {mark : {show: true},//标记dataView : {show: true, readOnly: false},//数据视图magicType: {show: true, type: ['line', 'bar']},//图形转换restore : {show: true},//刷新图表saveAsImage : {show: true}//另存为图片}},
查看更多提示框的样式属性戳我
calculable : true,//可否拖拽图表 感觉应该用于手机吧legend: {data:['Growth', 'Budget ', 'Budget '],//图例的数据标题itemGap: 5,//图例每项之间的间隔right:'200',//图例距离右边多少距离 同样的 上下左右textStyle: { //图例的样式属性fontWeight: 'normal', color: '#fff',},},
查看更多图例的样式属性戳我
//color:['#FFD200','#d0104c'],//这里的是设置图表数据内容的颜色grid: {//指整个直角坐标系 就是整个图表 top: '12%',left: '1%',right: '10%',containLabel: true//grid区域是否包含坐标轴的刻度标签},
查看更多grid的样式属性戳我
xAxis: [{type : 'category',//坐标轴类型。data : obama_budget_.names,//数据 数据 数据 放在这里axisLabel: {//坐标轴刻度标签。show: true,//开启textStyle: {//坐标轴刻度标签的样式属性color: '#fff'}},axisLine:{//坐标轴在 grid 区域中的分隔线。lineStyle:{//分隔线的样式属性color:'rgba(255,255,255,0.5)'}}}],
查看更多X轴的样式属性戳我
yAxis: [{type : 'value',//坐标轴类型。name : 'Budget (million USD)',//坐标轴属性名axisLabel: {//坐标轴刻度标签的设置formatter: function (a) {//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。a = +a;return isFinite(a)? echarts.format.addCommas(+a / 1000): '';},textStyle: {color: '#fff'}},splitLine:{//坐标轴在 grid 区域中的分隔线。lineStyle:{color:'#534d49',show:'false'}},axisLine:{//坐标轴轴线相关设置。lineStyle:{color:'#fff'}}}],
查看更多Y轴的样式属性戳我
dataZoom: [{show: true,//是否显示start: 94,//数据窗口范围的起始百分比0表示0% 94表示94%end: 100,//数据窗口范围的结束百分比 同上borderColor:'rgba(255,255,255,0.2)',//边框颜色fillerColor:'#8a6bbe',//选中范围的填充颜色backgroundColor:'#91989F',//背景颜色showDetail:false//选中的时候显示详细信息},{type: 'inside',//类型start: 94,end: 100,},{show: false,yAxisIndex: 0,//设置 dataZoom-inside 组件控制的 y轴filterMode: 'empty',//选择数据过滤类型 这个需要具体用一下感受一下width: 30,height: '80%',showDataShadow: false,left: '93%',}],
查看更多可拖动的时间轴的样式属性戳我
series : [//系列列表(官方定义) 其实就放数据的地方{name: 'Budget ',//名称type: 'bar',//类型 折线啊 柱形图啊 饼图啊之类的data: obama_budget_.budgetList,//图表里面的数据itemStyle:{//不同的type对应不同的样式 详见文档 下面有链接normal:{color:'#FFD200'}},},{name: 'Budget ',type: 'line',data: obama_budget_.budgetList,areaStyle: {normal:{}},//区域填充样式。如果要折线并且有面积的感觉 就是这个itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0, color: '#FFD200'},{offset: 1, color: 'rgba(255,255,255,0)'}])}}} ]
查看更多series的样式属性戳我
};
那么 先写到这里 随后再增加饼图啊什么的 有帮助的话赞助一下我们程序猿 thanks O(∩_∩)O哈哈~
至于结果什么样…gif图太大 上传不上来 贴上百度云链接好了 爱慕骚瑞(。・＿・。)ﾉI’m sorry~
穿越链接
