echarts笔记

时间:2023-02-11 09:53:50

常见问题:

1.x轴和y轴type同时为category时不可行

只能改变方式显示,返回不同名称,如加上百分比显示 formatter:"value%";

 var waterLevel = ["", "Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "劣Ⅴ"];
yAxis: [
{
type: 'value',
interval: true,
max: 6,
axisLabel: {
formatter: function (params) {
return waterLevel[params];
}
},
data: waterLevel
}
],

2.当存放图表的Div为隐藏时,无法加载图表(需要设置好高度)

3.主题加载

echart3加载主题

//先引用js包(如2.0版)<script src="/echarts/themes/macarons.js" type="text/javascript"></script>
echarts.registerTheme("macarons", theme);
var domChart1 = document.getElementById("Chart1");
var myChar = echarts.init(domChart1, "macarons");

点击查看详解

echart2加载主题

require.config({
paths: {
'echarts': '/UILib/echarts'
}
}); // 使用【柱状图】
require(
[
'echarts',
'echarts/themes/2.2.7/macarons',
'echarts/chart/line',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec, theme) {
// 基于准备好的dom,初始化echarts图表
myChart = ec.init(document.getElementById('Chart1'), theme);
})

4.echarts3绑定事件

myChart.on("click", fcShowInfo);
function fcShowInfo(param) {}

百度echarts案例下载

http://echarts.baidu.com/gallery/editor.html?c=effectScatter-map

effectScatter-map是案例名称,如http://echarts.baidu.com/demo.html#lines-bmap-bus

effectScatter-map