![]()
var chartDom = document.getElementById('main1'); var myChart = echarts.init(chartDom); var option; // 环形图 option = { title: { left: 'center' }, tooltip: { // 悬浮框显示 trigger: 'item', // marker：显示标记， name：显示名称, value：显示数值,seriesName：显示系列名称 formatter: function (params) { return params.seriesName +': ' + '<span style="display: inline-block; width: 60px;"></span>'+ '<b>' + params.value + '<b/>' + ' %' + '<br/>' + params.marker + params.name; } }, legend: { // orient: 'vertical', right: '0', top: 'center', }, series: [ { name: '销售额占比', type: 'pie', radius: ['40%', '70%'], // 设置饼图的半径 itemStyle: { borderRadius: 5, // 边框圆角 borderColor: '#fff', // 边框颜色 borderWidth: 2 // 饼图扇形之间的距离 }, data: luJuProporList.value, label: { // 饼图标签 show: false, position: 'center', // formatter: '{c} %' // 为每个数据点添加单位 }, // 鼠标移入饼图扇形时，显示标签 emphasis: { label: { show: true, fontSize: 15, fontWeight: 'bold' } }, } ] }; option && myChart.setOption(option);
![]()
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; // 折线图 option = { xAxis: { type: 'category', boundaryGap: false, data: monthArr.value, axisLabel: { interval: 0, // 强制显示所有标签 rotate: 0, // 旋转30度（可选） margin: 10 // 标签与轴线距离（可选） } }, tooltip: { trigger: 'axis', // marker：显示标记， name：显示名称, value：显示数值,seriesName：显示系列名称 formatter: function (params) { return params[0].seriesName + ': ' + '<span style="display: inline-block; width: 60px;"></span>'+ '<b>' + params[0].value + '</b>' + ' 万元' + '<br/>' + params[0].marker + params[0].name; } }, yAxis: { type: 'value', // axisLabel: { // formatter: '{value} 万元' // y轴单位（可选） // } }, series: [ { name: '近一年销售额趋势', data: moneyArr.value, type: 'line', // stack: 'Total', // smooth: true, areaStyle: { color: '#E8F2FF' // 阴影颜色 }, label:{ }, smooth: true } ] }; option && myChart.setOption(option);
