下载
npm install echarts --save
引用
import * as echarts from 'echarts';
html
<div id="mainChart" ref='mainChart' style="width:280px;height:260px;margin-left:10px;"></div>
外环内圈效果图
var chartDom = document.getElementById('mainChart');
var myChart = echarts.init(chartDom);
var option;
const startAlpha = 1;
const endAlpha = 0;
const color = [
{r:55, g: 196, b: 255,},
{r:126, g: 90, b: 187,},
{r:30, g: 103, b: 242,},
{r:203, g: 154, b: 86,},
{r:255, g: 153, b: 187,},
{r:55, g: 153, b: 204,},
{r:153, g: 204, b: 51, },
{r:255, g: 153, b: 204,},
{r:255, g: 204, b: 204,},
{r:255, g: 204, b: 52,},
{r:153, g: 204, b: 153,},
{r:204, g: 204, b: 51, },
{r:102, g: 153, b: 255,},
{r:204, g: 204, b: 255,},
]
const datas=[
{ name: '采矿业', value: '1' },
{ name: '制造业', value: '87'},
{ name: '水电煤气',value:'4'},
{ name: '建筑业', value: '6'},
{ name: '批发零售',value: '7'},
{ name: '信息技术',value:'27'},
{ name: '金融业', value: '7' },
{ name: '房地产', value: '7' },
{ name: '商务服务',value: '4'},
{ name: '科研服务',value: '1'},
{ name: '公共环保',value:'1'},
{ name: '卫生', value: '3'},
{ name: '文化传播',value:'5'}
]
/**
* 线性渐变起止方向的计算方法
* @param {*} startArc 开始角度
* @param {*} endArc 结束角度
* @returns 四个坐标 x,y,x2,y2
*/
/**
* 给数据写入 样式(线性渐变)
* @param {*} datas 数据
* @param {*} colorlist 颜色列表
* @param {*} startAlpha 开始颜色的透明度
* @param {*} endAlpha 结束颜色透的明度
* @returns 带样式的数据
*/
function setGradientColorInItemSyle(datas, colorlist, startAlpha, endAlpha) {
for (let i = 0; i < datas.length; i++) {
const color = colorlist[i];
datas[i].itemStyle = {
color: {
// 这里给了 线性渐变的起止颜色
"colorStops": [{
offset: 0,
color: `rgba(${color.r}, ${color.g}, ${color.b}, ${startAlpha})`
},
{
offset: 0.65,
color: `rgba(${color.r}, ${color.g}, ${color.b}, 0.5)`
},{
offset: 1,
color: `rgba(${color.r}, ${color.g}, ${color.b}, ${endAlpha})`
}]
}
}
}
return datas
}
option = {
backgroundColor: "#000",
"color": ["#1576d2"],
"tooltip": { //控制提示框显示
"show": true,
"textStyle": {
"color": "#000",
"fontSize": 20,
"fontFamily": "微软雅黑"
}
},
graphic: [ //中间文字
{
type: 'text',
left: 'center',
top: '42%',
style: {
text: '144',
textAlign: 'center',
fill: '#7cf1ff',
fontSize: 18,
fontWeight: 'bold',
// color: '#4d4f5c',
},
},
{
type: 'text',
left: 'center',
top: '52%',
style: {
text: '总数',
textAlign: 'center',
fill: '#e3eeff',
fontSize: 18,
// color: '#4d4f5c',
},
},
],
"series": [
{
// name: '内圈',
type: 'pie',
radius: ['58.9%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
normal: {
// color:"#4b8495",
borderType: 'dashed', //dotted 虚线
borderColor: '#4b8495', // 虚线颜色
// borderWidth: 2,// 虚线宽度
// borderRadius: 5,
opacity: 0.5,
borderDashOffset: 10,
},
},
minAngle: 30,
hoverAnimation: false, //鼠标事件
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
data: [{ value: 0 ,
tooltip:{ //控制提示框显示
formatter: function (params, ticket, callback) {
return '';
}
}
}],
},{
"type": "pie",
"data": setGradientColorInItemSyle(datas, color, startAlpha, endAlpha),
"animation": false,
"radius": ['80%', '90%'],
// "center": ["50%", "50%"],
"labelLine": {
show: false
},
label:{ //边框附近出现文字
show:false
},
"itemStyle": {
"linearGradient": true
},
"hoverAnimation": false
}]
};
console.log(option)
option && myChart.setOption(option);
堆叠柱状图
methods: {
// 堆叠柱状图显示总数
drawHistorygram() {
const myChart = echarts.init(this.$refs.mainChart)
let titleHistorygram = ['水土保持类', '生物多样性保护', '水源涵养区']
let historygramOption = {
tooltip: {
//过滤掉统计的series
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
// console.log(params);
var res = params[0].name + '<br/>'
for (let i = 0; i < params.length - 1; i++) {
res +=
params[i].marker +
params[i].seriesName +
':' +
params[i].value +
'<br/>'
}
return res
},
},
legend: {
x: 'center', //可设定图例在左、右、居中
y: 'top',
icon: 'circle',
textStyle: {
color: '#fff',
fontSize: 17,
},
data: titleHistorygram,
},
color: ['#04DFCF ', '#429DFF ', '#284ECB'],
grid: {
left: '3%',
right: '4%',
bottom: '0',
top: '20%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['富阳区', '西湖区', '萧山区', '滨江'],
axisLine: {
show: true, //不显示坐标轴线
lineStyle: {
color: '#ccc',
opacity: 0.2,
},
},
axisTick: {
show: false, //不显示坐标轴刻度线
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 18,
},
},
},
yAxis: {
type: 'value',
axisLine: {
show: false, //不显示坐标轴线
},
splitLine: {
//网格线
show: false,
},
axisLabel: {
show: false, //不显示坐标轴上的文字
},
axisTick: {
show: false, //不显示坐标轴刻度线
},
boundaryGap: false,
},
series: this.getSerise(titleHistorygram),
}
myChart.setOption(historygramOption)
},
getSerise(list) {
let historygramData = [
[20, 15, 10, 0],
[20, 15, 10, 0],
[5, 2, 1, 0],
]
let historygramColor = ['#04DFCF', '#429DFF', '#506AFC']
let result = null
result = list.map((item, index) => {
return {
name: item,
type: 'bar',
stack: 'total',
barWidth: 18,
emphasis: {
focus: 'series',
},
data: historygramData[index],
color: historygramColor[index],
}
})
result.push({
name: '',
type: 'bar',
stack: 'total',
data: [0.3, 0.2, 0.3, 0], //模拟数据
label: {
normal: {
offset: [0, -15], //左右,上下
show: true,
position: 'insidfeleft',
formatter: function (params) {
if (params.data == 0) {
return '0'
} else {
return params.data * 100
}
},
fontSize: 14,
fontWeight: 'bold',
textStyle: { color: '#fff' },
},
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)',
},
},
})
return result
},
},