echarts-组合图

布满荆棘的人生 2022-06-08 09:46 292阅读 0赞

![这里写图片描述][SouthEast]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>echarts.js案例一</title>
        <script type="text/javascript" src='lib/echarts/dist/echarts.js'></script>
    </head>
    <body>
        <div id="chart" style="width:100%;height:600px;"></div>
    </body>
    <script type="text/javascript"> // 初始化图表标签 var myChart = echarts.init(document.getElementById('chart')); var placeHolderStyle = { normal: { label: { show: false, position: "center" }, labelLine: { show: false }, color: "#dedede", borderColor: "#dedede", borderWidth: 0 }, emphasis: { color: "#dedede", borderColor: "#dedede", borderWidth: 0 } }; var options = { backgroundColor: "#404A59", color: ['#ffd285', '#ff733f', '#ec4863'], title: [{ text: '组合图', left: '40%', top: '6%', textStyle: { color: '#ffd285' } }], tooltip: { /*trigger: 'item', formatter: "{a} <br/>{b} : {c}" formatter: function(params) { //return params.seriesType //return params.name+':'+params.value }*/ }, legend: { x: '30%', bottom: '1%', textStyle: { color: '#ffd285', }, data: ['郑州', '永城', '新乡'] }, radar: { // shape: 'circle', indicator: [{ name: '销售', max: 6500 }, { name: '管理', max: 16000 }, { name: '信息技术', max: 30000 }, { name: '客服', max: 38000 }, { name: '研发', max: 52000 }, { name: '市场', max: 25000 }], center: ['83%', '85%'], radius: 80 }, grid: { left: '10%', right: '35%', top: '16%', bottom: '6%', containLabel: true }, toolbox: { "show": false, feature: { saveAsImage: {} } }, xAxis: { type: 'category', "axisLine": { lineStyle: { color: '#c0576d' } }, "axisTick": { "show": false }, axisLabel: { textStyle: { color: '#ffd285' } }, boundaryGap: true, //false时X轴从0开始 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { "axisLine": { lineStyle: { color: '#c0576d' } }, splitLine: { show: true, lineStyle: { color: '#c0576d' } }, "axisTick": { "show": false }, axisLabel: { textStyle: { color: '#ffd285' } }, type: 'value' }, series: [{ name: '郑州', smooth: true, type: 'bar', symbolSize: 8, //symbol: 'circle', data: [90, 50, 39, 50, 120, 82, 80] }, { name: '永城', smooth: true, type: 'bar', symbolSize: 8, //symbol: 'circle', data: [70, 50, 50, 87, 90, 80, 70] }, { name: '新乡', smooth: true, type: 'bar', symbolSize: 8, //symbol: 'circle', data: [290, 200, 20, 132, 15, 200, 90] }, { type: 'pie', center: ['83%', '20%'], radius: ['15%', '20%'], tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, label: { normal: { position: 'center' } }, data: [{ value: 335, name: '污染来源分析', itemStyle: { normal: { color: '#ffd285' } }, label: { normal: { formatter: '{d} %', textStyle: { color: '#ffd285', fontSize: 20 } } } }, { value: 180, name: '占位', tooltip: { show: false }, itemStyle: { normal: { color: '#404A59' } }, label: { normal: { textStyle: { color: '#ffd285', }, formatter: '\n汽车尾气' } } }] }, { type: 'pie', center: ['83%', '50%'], radius: ['15%', '20%'], name: '饼图', tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, /* label: { normal: { textStyle: { color: '#ffd285', }, formatter: "{b}: {c} ({d}%)" } },*/ data: [{ value: 335, name: '直接访问', itemStyle: { normal: { color: '#FF3300' } } }, { value: 310, name: '邮件营销', itemStyle: { normal: { color: '#FFFF00' } } }, { value: 234, name: '联盟广告', itemStyle: { normal: { color: '#00FF00' } } }, { value: 135, name: '视频广告', itemStyle: { normal: { color: '#1E90FF' } } }, { value: 1548, name: '搜索引擎', itemStyle: { normal: { color: '#ADFF2F' } } }] }, { type: 'radar', center: ['83%', '85%'], //radius: ['15%', '20%'], //name: '雷达', tooltip: { }, data: [{ value: [4300, 10000, 28000, 35000, 50000, 19000], name: '预算分配' }, { value: [5000, 14000, 28000, 31000, 42000, 21000], name: '实际开销' }] } ] } myChart.setOption(options); </script>
    </html>

[SouthEast]: /images/20220608/e5cc12cd15d540099342621dff1fe4a6.png