官方文档 https://echarts.baidu.com/examples/
官方配置文档: https://www.echartsjs.com/option.html
ECharts详细说明 http://elang0705.iteye.com/blog/2252577
Echarts 柱状图x轴显示全部类目 https://blog.csdn.net/t876587201/article/details/70159001
Echarts横坐标倾斜,顶部显示数字 https://blog.csdn.net/flygoa/article/details/50698066
格式化顶部文字 https://blog.csdn.net/qq_33591903/article/details/81101378
格式化提示文字 echarts tooltip格式化 https://blog.csdn.net/lemon_zhao/article/details/52223609
echarts柱状图,改变柱状颜色 https://blog.csdn.net/t876587201/article/details/70159076
Echarts 柱状图颜色控制 https://blog.csdn.net/xuexuan_050848/article/details/53909525
echarts中tooltip里面小圆点(有图)是怎么做的啦? https://segmentfault.com/q/1010000008101623
echart使用记录
格式化提醒
1 2 3 4 5 6 7 8 |
tooltip: { trigger: 'item', // 单个显示,多个提示使用axis //formatter: "{a} <br/>{c} ({d}%)" formatter: function(params, ticket, callback){ alert("formatter"); //自己返回格式化信息 } } |
echarts多图例子
http://www.oschina.net/question/2430036_2157470
一张图里面包含两个pie图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
Js代码 option1 = { title : { text: '性别统计', subtext: '纯属虚构', x:'right' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['本科男','本科女','硕士男','硕士女'] }, series : [ { name: '硕士', type: 'pie', radius : '55%', center: ['35%', '30%'], data:[ {value:250, name:'硕士男'}, {value:150, name:'硕士女'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '本科', type: 'pie', radius: '55%', center: ['70%', '70%'], data: [ {value: 500, name:'本科男'}, {value: 300, name: '本科女'} ] } ] }; myChart1 = echarts.init(document.getElementById('canvas1'), globalEChartTheme); myChart1.setOption(option1); |
一个柱状图 + 一个pie图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
Js代码 option1 = { "title": {"text": "采购统计排行", "subtext": "采购统计排行"}, "tooltip": {"trigger": "axis"}, "legend": { "x": "left", "y": "bottom", "data": ["切割机V1", "PVC0.4", "PVC0.9"] }, "toolbox": { "show": true, "orient": "vertical", "x": "right", "y": "center", "feature": { "mark": {"show": true}, "dataView": {"show": true, "readOnly": false}, "magicType": {"show": true, "type": ["line", "bar", "stack", "tiled"]}, "restore": {"show": true}, "saveAsImage": {"show": true} } }, "calculable": true, "xAxis": [{"type": "category", "data": ["采购数量统计排名"]}], "yAxis": [{"type": "value"}], "series": [ { "type": "bar", "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]}, "markLine": {"data": [{"type": "average", "name": "平均值"}]}, "name": "切割机V1", "data": [13] }, { "type": "bar", "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]}, "markLine": {"data": [{"type": "average", "name": "平均值"}]}, "name": "PVC0.4", "data": [1313] }, { "type": "bar", "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]}, "markLine": {"data": [{"type": "average", "name": "平均值"}]}, "name": "PVC0.9", "data": [1125] }, { name: '本科', type: 'pie', radius: '10%', center: ['70%', '20%'], data: [ {value: 13, name: '切割机V1'}, {value: 1313, name: 'PVC0.4'}, {value: 1125, name: 'PVC0.9'} ] }] }; myChart1 = echarts.init(document.getElementById('canvas1'), globalEChartTheme); myChart1.setOption(option1); |
柱状图每个周期对应单独的一个并图
http://echarts.baidu.com/demo.html#mix-timeline-finance
柱状图颜色和标签颜色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
series: [{ data: series[0].data, type: 'bar', itemStyle: { normal: { color:'#e43c59', } }, label: { normal:{ show: true, color:'#37A2DA', position: 'top', textStyle: { //color: 'black', fontSize: 12 }, formatter: function(data) { return $.WebUtils.formatMoney(data.value,2,true) + "元"; } } } }] |
提示中的小圆点
1 2 3 4 5 6 7 8 9 |
tooltip: { trigger: 'item', formatter: function (params, ticket, callback) { var name = params.name var seriesName = params.seriesName var value = params.value return params.marker+' '+name + '<br>' + $.WebUtils.formatMoney(value,2,true) + " 元" } }, |