echarts 外环内圈效果图、堆叠柱状图

下载

 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
    },
  },

​​