其他echarts： 

qecharts绘制一个柱状图，柱状折线图

效果图：

代码：

<template><div class="wrapper"><div ref="pieChart1" id="pieChart1"></div><div ref="pieChart2" id="pieChart2"></div></div>
</template><script>
export default {mixins: [],components: {},props: {table: {type: Object,default: {datas: {},color: [],},theme: {defalut: "dark",},},},data() {return {limitLength: 7, //显示name长度};},created() {},mounted() {},watch: {table: {handler(newVal) {if (newVal) {if (newVal.limitLength) this.limitLength = newVal.limitLength;// 进行数据处理操作this.option();this.option2();}},},},methods: {option() {let option = {tooltip: {// position: 'inner',trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)",},toolbox: {show: true,feature: {mark: { show: true },// saveAsImage: { show: true },},},series: [{type: "pie",center:this.table.legendLocation == "left"? ["60%", "50%"]: ["50%", "40%"],itemStyle: {// borderRadius: this.hollowOut ? 0 : 5,//元素的圆角//label指示线的颜色color: (params) => {var index = params.dataIndex;return this.table.color[index];},},label: {show: true,position: "outer", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'formatter: (series) => {// 设置不同的字体颜色return "{a|" + series.name + "}\n{b|" + series.value + "}";},rich: {a: {fontSize: 12, // 第一个字的字号},b: {fontSize: 16, // 第二个字的字号},},},emphasis: {//中间文字显示show: true,},data: this.table.datas.map((item, index) => {item.label = {// label的颜色color: this.table.color[index],};item.name = item.NAME;item.value = item.VALUE || item.NUM;return item;}),},],};var chartDom = this.$refs.pieChart1;var myChart = this.$E.init(chartDom);myChart.setOption(option);},option2() {const option2 = {tooltip: {// position: 'inner',trigger: "item",// {a} <br/>formatter: "{b} : {c} ({d}%)",},legend: {textStyle: {color: this.theme === "dark" ? "#bfa" : "#333",},orient:this.table.legendLocation == "left" ? "vertical" : "horizontal",type: "scroll", //颜色过多可以滚动left: this.table.legendLocation == "left" ? 0 : "center",top: this.table.legendLocation == "left" ? "top" : "bottom",icon: this.table.legendIcon ? "circle" : "",formatter: (name) => {var seriesData = option2.series[0].data; // 数据在series的第几个中var total = 0;for (var i = 0; i < seriesData.length; i++) {total += seriesData[i].value;}for (var j = 0; j < seriesData.length; j++) {if (name === seriesData[j].name) {var percent = ((seriesData[j].value / total) * 100).toFixed(2);if (name.length > this.limitLength) {return (name.substring(0, this.limitLength) +"..." +" " +seriesData[j].value +" " +percent +"%");} else {return name + " " + seriesData[j].value + " " + percent + "%";}}}},},toolbox: {show: true,feature: {mark: { show: true },// saveAsImage: { show: true },},},series: [{type: "pie",center:this.table.legendLocation == "left"? ["60%", "50%"]: ["50%", "40%"],itemStyle: {// borderRadius: this.hollowOut ? 0 : 5,//每一个元素的颜色color: (params) => {var index = params.dataIndex;return this.table.color[index];},},label: {position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'// formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比formatter: "{d}%",},emphasis: {//中间文字显示show: true,},data: this.table.datas.map((item, index) => {item.label = {// label的颜色color: "#fff",};item.name = item.NAME;item.value = item.VALUE || item.NUM;return item;}),},],};var chartDom2 = this.$refs.pieChart2;var myChart2 = this.$E.init(chartDom2);myChart2.setOption(option2);// 添加点击事件myChart2.on("click", function (params) {console.log(params.seriesIndex);if (params.componentType === "series") {let dataIndex = params.dataIndex; // 获取点击的数据索引let data = option2.series[params.seriesIndex].data[dataIndex]; // 获取点击的数据对象console.log(data);}});},},
};
</script><style scoped lang="scss">
.wrapper {width: 100%;height: 100%;position: relative;#pieChart1,#pieChart2 {width: 100%;height: 100%;box-sizing: border-box;position: absolute;top: 0;left: 0;}
}
</style>

这是一个组件调用：

<NewPie:table="table":theme="theme":style="{ height: heightNew }"
/>
// heightNew : 动态计算的高度

入参：

/**"table": {"datas": [{"VALUE": 25,"NAME": "产假","label": {"color": "#fff"},"name": "产假","value": 25},{"VALUE": 6,"NAME": "公休","label": {"color": "#fff"},"name": "公休","value": 6},{"VALUE": 2,"NAME": "病假","label": {"color": "#fff"},"name": "病假","value": 2},{"VALUE": 1,"NAME": "事假","label": {"color": "#fff"},"name": "事假","value": 1},{"VALUE": 1,"NAME": "育儿假","label": {"color": "#fff"},"name": "育儿假","value": 1},{"VALUE": 1,"NAME": "工伤假","label": {"color": "#fff"},"name": "工伤假","value": 1}],"color": ["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc","#8364FF","#36F4D7","#FBB03C"],"legendLocation": "left","legendIcon": "round"}
*/