全局echarts对象
-
init初始化
-
registerTheme注册主题
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
-
registerMap地图图表
-
connect
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script><script src="theme/itcast.js"></script><script src="lib/jquery.min.js"></script>
</head><body><div style="width: 600px;height:400px;border: 1px solid red"></div><div style="width: 600px;height:400px;border: 1px solid green" id="div1"></div><script>var mCharts = echarts.init(document.querySelector("div"), 'itcast')var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'bar',data: yDataArr,markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]},label: {show: true,rotate: 60},barWidth: '30%'}]}mCharts.setOption(option)var mCharts2 = echarts.init(document.querySelector('#div1'))$.get('json/map/china.json', function(ret){echarts.registerMap('aa', ret)var option2 = {geo: {type: 'map',map: 'aa'}}mCharts2.setOption(option2)// echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来})</script>
</body></html>
echartsInstance对象
-
setOption
-
resion
-
on\off
-
dispatchAction
-
clear
-
dispose
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script><script src="lib/jquery.min.js"></script>
</head><body><div style="width: 600px;height:400px"></div><button id="btn1">触发行为</button><button id="btn2">clear</button><button id="btn3">setOption</button><button id="btn4">dispose</button><script>var mCharts = echarts.init(document.querySelector("div"))var pieData = [{value: 11231,name: "淘宝",},{value: 22673,name: "京东"},{value: 6123,name: "唯品会"},{value: 8989,name: "1号店"},{value: 6700,name: "聚美优品"}]var option = {legend: {data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']},tooltip: {show: true},series: [{type: 'pie',data: pieData}]}mCharts.setOption(option)mCharts.on('click', function (arg) {console.log(arg)console.log('click...')}) // 对事件进行监听mCharts.off('click') // 解绑click的事件mCharts.on('legendselectchanged', function (arg) {console.log(arg)console.log('legendselectchanged')})$('#btn1').click(function () {// 模拟用户的行为mCharts.dispatchAction({type: 'highlight',seriesIndex: 0, // 系列的索引dataIndex: 1 // 数据的索引})mCharts.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: 2})})$('#btn2').click(function () {// 清空图表的实例mCharts.clear()})$('#btn3').click(function () {// 重新设置optionmCharts.setOption(option)})$('#btn4').click(function () {// 销毁mChartsmCharts.dispose()})</script>
</body></html>