为了账号安全,请及时绑定邮箱和手机立即绑定

请大家提意见,觉得Echarts的设计结构,挺利于学习使用的

结构很清晰、固定,按照既定的格式填充数据即可

这是我根据“香港iPhone销量图”该的。

请大家提意见,交流

<script>
let myChart = echarts.init(document.querySelector('#main'));

// 
function randomData() {
    return Math.round(Math.random()*200);
}
// 
let option = {
    title: {
        text: '青岛市区会员数量统计图(2017)',
        subtext: '随机生成虚拟数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['风景','人像','']
    },
    visualMap: {
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '风景',
            type: 'map',
            mapType: 'qingDao',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '黄岛区',value: randomData() },
                {name: '胶州市',value: randomData() },
                {name: '平度市',value: randomData() },
                {name: '莱西市',value: randomData() },
                {name: '即墨市',value: randomData() },
                {name: '城阳区',value: randomData() },
                {name: '李沧区',value: randomData() },
                {name: '崂山区',value: randomData() },
                {name: '李沧区',value: randomData() },
                {name: '市南区',value: randomData() },
                {name: '市北区',value: randomData() }
            ]
        },
        {
            name: '人像',
            type: 'map',
            mapType: 'qingDao',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
	            {name: '黄岛区',value: randomData() },
	            {name: '胶州市',value: randomData() },
	            {name: '平度市',value: randomData() },
	            {name: '莱西市',value: randomData() },
	            {name: '即墨市',value: randomData() },
	            {name: '城阳区',value: randomData() },
	            {name: '李沧区',value: randomData() },
	            {name: '崂山区',value: randomData() },
	            {name: '李沧区',value: randomData() },
	            {name: '市南区',value: randomData() },
	            {name: '市北区',value: randomData() }
            ]
        }
    ]
};
// 
myChart.setOption(option);
</script>


正在回答

1 回答

大结构三块。

复杂的是option里的内容,如果掌握了option内的结构,基本就可以掌握Echarts的主动权了。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
Echarts3.0入门基础与实战
  • 参与学习       53423    人
  • 解答问题       168    个

Echarts3.0入门视频教程,带你领略高逼格数据可视化的魅力

进入课程

请大家提意见,觉得Echarts的设计结构,挺利于学习使用的

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信