本文所给源码均基于官方实例源码下载后制作,本文源码所有js全部引用在线版,你也可以将这些js下载下来后自行引用。(ECharts在线示例:http://echarts.baidu.com/examples/)
一共两个文件,一个html,一个存放json数据的txt文件。第一次接触学习,有不少冗余数据凑合着看吧!
ECharts的强大之处我怕是只能学得一点皮毛,有兴趣的可以去官网看看百度出品,另外百度出品的一个富文本编辑器UEditor也不错,传送地址:https://ueditor.baidu.com/website/onlinedemo.html
?>
55
function loadOneColumn() {
? ? var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
? ? // 显示标题,图例和空的坐标轴
? ? myChart.setOption({
? ? ? ? title: {
? ? ? ? ? ? text: '数据对比——异步加载'
? ? ? ? },
? ? ? ? tooltip: {},
/*tooltip: {//鼠标悬浮显示数据定位
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},*/
toolbox: {/*右上角 统计图像切换&下载*/
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
? ? ? ? legend: {
? ? ? ? ? ? data: ['发布排行-悬浮提示','数据2']/*上方标题*/
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? ? data: []
? ? ? ? },
? ? ? ? yAxis: [
{
type: 'value',
name: 'RMB',
axisLabel: {
formatter: '¥{value} '
}
},{
? ? ? ? ? ? splitLine: { show: false },//去除网格线
? ? ? ? ? ? name: ''
? ? ? ? }],
? ? ? ? series: [{
? ? ? ? ? ? barWidth: "30px",
? ? ? ? ? ? name: '发布排行-悬浮提示',
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? position: 'top&