|
|
@@ -292,8 +292,18 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- ECharts图标模块 -->
|
|
|
- <view class="echartsClass" v-show="showEcharts">
|
|
|
- <ec-canvas id="mychart" canvas-id="mychart" :ec="ec"></ec-canvas>
|
|
|
+ <view
|
|
|
+ class="echartsClass"
|
|
|
+ v-show="showEcharts"
|
|
|
+ style="width: 600rpx; height: 600rpx"
|
|
|
+ >
|
|
|
+ <ec-canvas
|
|
|
+ id="mychart"
|
|
|
+ canvas-id="mychart"
|
|
|
+ :ec="ec"
|
|
|
+ ref="ecCanvas"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ ></ec-canvas>
|
|
|
</view>
|
|
|
|
|
|
<alarModel
|
|
|
@@ -354,11 +364,14 @@ export default {
|
|
|
top: 0,
|
|
|
clientIdProp: null,
|
|
|
breathRate: "",
|
|
|
- ec: { onInit: this.initChart },
|
|
|
+ ec: { onInit: null },
|
|
|
showEcharts: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
+ created() {
|
|
|
+ this.ec.onInit = this.initChart;
|
|
|
+ },
|
|
|
methods: {
|
|
|
getdevInfo(devId) {
|
|
|
this.$http
|
|
|
@@ -685,38 +698,112 @@ export default {
|
|
|
getFrenEcharts() {
|
|
|
this.showEcharts = true;
|
|
|
this.$nextTick(() => {
|
|
|
- const canvas = this.$refs.ecCanvas;
|
|
|
- if (canvas) this.initChart(canvas);
|
|
|
+ if (this.$refs.ecCanvas) {
|
|
|
+ this.initChart(this.$refs.ecCanvas);
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
initChart(canvas) {
|
|
|
- console.log(canvas, 9999);
|
|
|
- const chart = echarts.init(canvas, null, {
|
|
|
- width: 300,
|
|
|
- height: 300,
|
|
|
+ const chart = echarts.init(canvas || null, null, {
|
|
|
+ width: 600,
|
|
|
+ height: 600,
|
|
|
devicePixelRatio: 2,
|
|
|
});
|
|
|
- canvas.setChart(chart);
|
|
|
-
|
|
|
- // 设置一个简单的示例图表
|
|
|
- const option = {
|
|
|
- title: { text: "ECharts 示例" },
|
|
|
- tooltip: {},
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: ["A", "B", "C", "D"],
|
|
|
+ chart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ confine: true,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["热度", "正面", "负面"],
|
|
|
},
|
|
|
- yAxis: { type: "value" },
|
|
|
+ grid: {
|
|
|
+ left: 20,
|
|
|
+ right: 20,
|
|
|
+ bottom: 15,
|
|
|
+ top: 40,
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#999",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#666",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ axisTick: { show: false },
|
|
|
+ data: [
|
|
|
+ "汽车之家",
|
|
|
+ "今日头条",
|
|
|
+ "百度贴吧",
|
|
|
+ "一点资讯",
|
|
|
+ "微信",
|
|
|
+ "微博",
|
|
|
+ "知乎",
|
|
|
+ ],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#999",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#666",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
series: [
|
|
|
{
|
|
|
- name: "数量",
|
|
|
+ name: "热度",
|
|
|
+ type: "bar",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "inside",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [300, 270, 340, 344, 300, 320, 310],
|
|
|
+ itemStyle: {},
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "正面",
|
|
|
type: "bar",
|
|
|
- data: [5, 20, 36, 10],
|
|
|
+ stack: "总量",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [120, 102, 141, 174, 190, 250, 220],
|
|
|
+ itemStyle: {},
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "负面",
|
|
|
+ type: "bar",
|
|
|
+ stack: "总量",
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "left",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [-20, -32, -21, -34, -90, -130, -110],
|
|
|
+ itemStyle: {},
|
|
|
},
|
|
|
],
|
|
|
- };
|
|
|
- chart.setOption(option);
|
|
|
+ });
|
|
|
return chart;
|
|
|
},
|
|
|
},
|
|
|
@@ -1157,10 +1244,9 @@ export default {
|
|
|
.echartsClass {
|
|
|
position: absolute;
|
|
|
top: 0%;
|
|
|
- left: -27%;
|
|
|
+ left: -31%;
|
|
|
transform: translate(50%, 50%);
|
|
|
- width: 300px;
|
|
|
- height: 300px;
|
|
|
+
|
|
|
// background: #1757dd;
|
|
|
}
|
|
|
}
|
